8

我创建了一个小 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');
});

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

难道我做错了什么？或者这是 jQuery 中的一个错误，或者文档是错误的：

我们还可以包含一个选择器作为可选参数

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

4

4 回答 4

6

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

是相同的

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

于 2013-04-18T11:20:57.577 回答
3

要删除与选择器匹配的子元素，您可以使用：

$('[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 上有一个运行示例。

于 2013-04-18T11:24:46.003 回答
1

$(selector).remove(filter)删除 中的所有匹配filter元素$(selector)，请参阅此示例

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

于 2013-04-18T11:20:58.873 回答
0

选择器仅支持包装对象中的元素。因此，如果您使用 div 而不是内部的 span 并选择所有 div 作为包装器，它就可以工作。

例如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>

和

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');
});
于 2013-04-18T11:34:53.357 回答