Geek asks and answers

JQuery remove (selector) doesn't seem to work

I created a small jsfiddle: http://jsfiddle.net/duRXc/

<div data-role="wrapper">
    <span class="to-be-removed" data-role="to-be-removed">
        text to be removed
    </span>
</div>
<button id="remove1">Remove by jQuery object</button><br>
<button id="remove2">Remove by selector</button><br>
<button id="remove3">Remove by selector(class)</button>

var $wrapper = $('[data-role="wrapper"]');

$('#remove1').on('click', function () {
    $wrapper.find('[data-role="to-be-removed"]').remove();
});

// this should work: http://api.jquery.com/remove/
$('#remove2').on('click', function () {
    $wrapper.remove('[data-role="to-be-removed"]');
});

// this should work: http://api.jquery.com/remove/
$('#remove3').on('click', function () {
    $wrapper.remove('.to-be-removed');
});

The problem I am facing is that the .remove overload (selector) does not work. I thought this had something to do with my data transfer selector, but the remove by class selector does not work either.

Am I doing something wrong? Either this is a bug in jQuery or maybe the docs are wrong:

We can also include the selector as an optional parameter.

http://api.jquery.com/remove/

+5
source share
4 answers

$wrapper.find('span').remove('[data-role="to-be-removed"]')

coincides with

$wrapper.find('span').filter('[data-role="to-be-removed"]').remove()

var $wrapper = $('[data-role="wrapper"]');

$('#remove1').on('click', function () {
    $wrapper.find('[data-role="to-be-removed"]').remove();
});

// this should work: http://api.jquery.com/remove/
$('#remove2').on('click', function () {
    $wrapper.find('[data-role="to-be-removed"]').remove('[data-role="to-be-removed"]');
});

// this should work: http://api.jquery.com/remove/
$('#remove3').on('click', function () {
    $wrapper.find('[data-role="to-be-removed"]').remove('.to-be-removed');
});

http://jsfiddle.net/duRXc/3/

+5
source

To remove children matching the selector, you can use:

$('[data-role="to-be-removed"]', $wrapper).remove();

remove(selector) . ...

<ul id="test">
    <li>One</li>
    <li class="example">Two</li>
    <li>Three</li>
</ul>

, , :

$('#test li').remove('.example');

JSFiddle .

+3

$(selector).remove(filter)deletes all relevant elements filterin $(selector), see this example

http://jsfiddle.net/steelywing/duRXc/6/

+1
source

The selector only supports elements that are in the wrapper object. So, if you use a div instead of the spacing inside and select all divs using the shell, it works.

eg. http://jsfiddle.net/hsLLr/

<div data-role="wrapper">
    <div class="to-be-removed" data-role="to-be-removed">
        text to be removed
    </div>
</div>
<button id="remove1">Remove by jQuery object</button><br>
<button id="remove2">Remove by selector</button><br>
<button id="remove3">Remove by selector(class)</button>

and

var $wrapper = $('div');

$('#remove1').on('click', function () {
    $wrapper.find('[data-role="to-be-removed"]').remove();
});

// this should work: http://api.jquery.com/remove/
$('#remove2').on('click', function () {
    $wrapper.remove('[data-role="to-be-removed"]');
});

// this should work: http://api.jquery.com/remove/
$('#remove3').on('click', function () {
    $wrapper.remove('.to-be-removed');
});
0
source

More articles:


All Articles