CODEWITHSUNDEEP
jquery
Phil
Phil

Reputation: 1849

How to remove an element from a Jquery object

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>

Upvotes: 1

Views: 114

Answers (3)

balexandre
balexandre

Reputation: 75073

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);
    });
});

Upvotes: -1

Adil Shaikh
Adil Shaikh

Reputation: 44740

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);


});

Upvotes: 0

tcovo
tcovo

Reputation: 7740

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);
});

Upvotes: 2

Related Questions