How to remove an element from a Jquery object

Question

After doing the following: $hold=$('<div>').load('page.php #somediv) I'm trying to remove an element in that html called removediv depending on the value of a cookie. I've tried:

if ($.cookie('mycookie') !== null){
$hold=$hold.not('#removediv');
}else{
document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"
}
$('#divtwo').html($hold);

But the removediv element always shows up, even when the cookie is set. I've also tried $hold.find('#removediv').remove(), but that also didn't work.

Any ideas?

EDIT: The $hold html looks like this:

<div>
 <div id="somediv">
  <div id="removediv" class="stuff"></div>
  <div id="okdiv" class="stuff"></div>
  <div id="okdiv" class="stuff"></div>
  <div id="okdiv" class="stuff"></div>
 </div>
</div>

Can you display the relavent HTML of page.php? Are you sure the id is correct? And that it only exists once? — scott.korin
– scott.korin, Commented Mar 17, 2013 at 22:52
$hold=$hold.not('#removediv'); won't affect the DOM. It simply creates a new jQuery result set and stores it in the variable called $hold. — tcovo
– tcovo, Commented Mar 17, 2013 at 22:54
@tcovo but I am then using the new $hold to populate the divtwo html. — Phil
– Phil, Commented Mar 17, 2013 at 22:57
Calling $hold.find('#removediv').remove() should do the right thing. However, the .load method initiates an asynchronous ajax request - is your code being executed after the response is received (i.e. in the "complete" callback) or is it possible this code is being called too early? — tcovo
– tcovo, Commented Mar 17, 2013 at 23:00

tcovo · Accepted Answer · 2013-03-17 23:16:57Z

2

Here's my best guess at how to make this work. Use remove to remove removediv from the html fragment, and put the code in the "complete" callback of the load method:

$hold = $('<div>').load('page.php #somediv', function(response, status, xhr) {
    if ($.cookie('mycookie') !== null){
        $hold.find('#removediv').remove();
    } else {
        document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"
    }
    $('#divtwo').html($hold);
});

answered Mar 17, 2013 at 23:16

tcovo

7,7802 gold badges22 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

tcovo, the asynchronous request was indeed the problem, and I solved it as per your instructions. Thanks!

Adil Shaikh · Accepted Answer · 2013-03-17 23:26:45Z

0

Try doing that in callback function like this

$('<div>').load('page.php #somediv', function(data) {
  $hold = data;

  if ($.cookie('mycookie') !== null){
    $hold.find('#removediv').remove();
   } else {
    document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"
   }
   $('#divtwo').html($hold);


});

edited Mar 17, 2013 at 23:26

answered Mar 17, 2013 at 23:17

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

balexandre · Accepted Answer · 2013-03-17 23:30:37Z

This is why things don't work with your example:

load() is an async call, so you need to continue your treatment only when the call ended
$hold.find('#removediv').remove() will only select the div, not actually remove it

For your code o work you need, to make use of the callback and the end, like this:

<script>
$(function() {
  $("#l").click(function() {

    var url = 'b.htm';

    $("#content").load(url + " #somediv", function(data) {

      var allHtml = $(data),
          newHtml = allHtml.find("#removediv").remove().end();

      console.log(newHtml.html());
    });

  });
});
</script>

assuming that you have a file with this html:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title>Stackoverflow example</title>
</head>
<body>
  <h1>Hello</h1>

  <a href="#" id="l">load content</a>
  <div id="content">Empty</div>

</body>
</html>

and b.htm has

<div>
 <div id="somediv">
  <div id="removediv" class="stuff">A</div>
  <div id="okdiv" class="stuff">B</div>
  <div id="okdiv" class="stuff">C</div>
  <div id="okdiv" class="stuff">D</div>
 </div>
</div>

the output would be (In Firefox as Chrome blocks the call for b.htm as a cross domain call as it's a local file)

enter image description here

output show:

console.log('data');
console.log(data);  
console.log('newHtml');
console.log(newHtml.html());

Example is on my Dropbox if you need to see both files.

using your own code:

$(function() {

    $('<div/>').load('page.php #somediv', function(data) {

        // 'data' has the page.php #somediv part
        var allHtml = $(data);

        if ($.cookie('mycookie') !== null)
            allHtml = allHtml.find("#removediv").remove().end();
        else
            document.cookie = "mycookie=1;expires=Thu, 31 Dec 2020 23:59:59 UTC; path=/"

        $('#divtwo').html(allHtml);
    });
});

download the files I exposed and give it a try then, if you're so sure of yourself :)

Collectives™ on Stack Overflow

How to remove an element from a Jquery object

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related