CODEWITHSUNDEEP
javascriptjquery
icecub
icecub

Reputation: 8773

jQuery .remove() with selector doesn't work

According to the .remove() | jQuery API Documentation, it is perfectly valid to include a selector as an optional parameter to .remove(). Quote:

We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:

$( "div" ).remove( ".hello" );

So I've written 2 divs to test this out:

<div id="div1">test
    <div id="div2">Remove</div>
</div>

Using this as jQuery:

$( document ).ready(function() {
    $( "#div1" ).remove( "#div2" );
});

It didn't remove the div as expected. The result was:

test
Remove

Instead using:

$( document ).ready(function() {
    $("#div2").remove();
});

Removes the div as expected. So what am I missing here? Is the documentation wrong? Did I misunderstood something?

Upvotes: 6

Views: 3939

Answers (4)

Martin Da Rosa
Martin Da Rosa

Reputation: 452

A example of how .remove( [selector ] ) works:

    $('.of-these-items').remove('.these-items');

if we have:

    <ul>
       <li class="of-these-items">1</li>
       <li class="of-these-items">2</li>
       <li class="of-these-items these-items">3</li>
       <li class="of-these-items these-items">4</li>
       <li class="of-these-items">5</li>
    <ul>

"of these items, remove these items":

    <ul>
       <li class="of-these-items">1</li>
       <li class="of-these-items">2</li>
       <li class="of-these-items">5</li>
    <ul>

Upvotes: 0

brenners1302
brenners1302

Reputation: 1478

This is the code that is not working right?

$( document ).ready(function() {
$( "#div1" ).remove( "#div2" );

});

And this is what you're trying to do?

$( "div" ).remove( ".hello" );

Try this. The code above means that it will remove all "div" tag that contains a class = "hello".

$( document ).ready(function() {
$( "div" ).remove( "#div2" );

});

Upvotes: 0

Amit
Amit

Reputation: 46323

The reason your code doesn't work is that the selector is used to filter the original list ("#div1" in your case). You can't remove children like this. You have to select the children then .remove() instead:

$('#div1').children('#div2').remove() // or .find('#div2').remove() if it's nested deeper
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">test
    <div id="div2">Remove</div>
</div>

The place where the selector does work is when you actually filter the list, like here:

$('div').remove('.remove')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="keep">test1</div>
<div id="div2" class="remove">test2</div>
<div id="div3" class="keep">test3</div>

Upvotes: 4

swatkins
swatkins

Reputation: 13630

You're misunderstanding what the selector parameter is doing. It is filtering the first set of objects.

From the docs:

A selector expression that filters the set of matched elements to be removed.

So, your "#div2" selector doesn't exist as a part of the "#div1" element. For example, say I have the following:

<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red notneeded">Red</div>
<div class="red notneeded">Red</div>
<div class="red">Red</div>

Then, I call the following:

$(function () {
  $("div.red").remove(".notneeded");
});

I would be left with the following:

<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Red</div>
<div class="red">Red</div>

So, the jQuery matched set is all divs with a class of red - the second selector (".notneeded") will filter that first matched set by the ones with a class of notneeded - then it will remove them.

Upvotes: 8

Related Questions