带选择器的jQuery .remove（）不起作用

Question

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?

Answer 1

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.

Answer 2

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> 

Answer 3

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

});

Answer 4

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>