jQuery删除(选择器)似乎不起作用

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

我创建了一个小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.

我遇到的问题是.remove(selector)重载不起作用。我认为它与我的数据角色选择器有关，但是类选择器的移除也不起作用。

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

我做错什么了吗?或者这是jQuery的一个bug，或者文档是错误的:

We can also include a selector as an optional parameter

我们还可以将选择器包含为可选参数

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

4 个解决方案

#1

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

wrapper.find美元(跨度).remove(“[data-role = "删除"]”)

is the same as

是一样的

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

wrapper.find美元(跨度).filter([data-role = "删除"]).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/

#2

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...

remove(选择器)方法是进一步筛选现有的选择。例如……

<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.

在JSFiddle有一个正在运行的示例。

#3

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

$(选择器).remove(filter)删除$(选择器)中所有匹配的筛选器元素，请参见这个示例

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

#4

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.

选择器只支持位于包装器对象中的元素。因此，如果您在内部使用div而不是span，并在其工作时选择所有div。

e.g. http://jsfiddle.net/hsLLr/

例如,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');
});

#1