CODEWITHSUNDEEP
jquery
Jaap
Jaap

Reputation: 3220

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'm having is that the .remove(selector) overload is not working. I thought it had something to do with my data-role selector, but the remove by class selector doesn't work as well.

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

We can also include a selector as an optional parameter

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

Upvotes: 8

Views: 4856

Answers (4)

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

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

is the same as

$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/

Upvotes: 6

Steely Wing
Steely Wing

Reputation: 17607

$(selector).remove(filter) removes all matching filter elements in $(selector), see this example

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

Upvotes: 1

kapsiR
kapsiR

Reputation: 3177

The selector only supports elements, which are in the wrapper object. So, if you use a div instead of a span inside and select all divs with as wrapper it works.

e.g. 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');
});

Upvotes: 0

Fenton
Fenton

Reputation: 250932

To remove child elements that match a selector you can use:

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

The remove(selector) method is to further filter the existing selection. For example...

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

If I select all of the list items, I can then remove any of those list items that match my filter:

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

There is a running example of this on JSFiddle.

Upvotes: 3

Related Questions