JQuery удалить (селектор) не похоже на работу

Question

Я создал небольшой 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 (селектор) перегрузки не работает. Я думал, что это связано с моим селектором данных и роли, но селектор remove by class тоже не работает.

Я что-то не так? Или это ошибка в JQuery или может быть, документы неверны:

Мы можем также включать в себя селектор в качестве необязательного параметра

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

Answer 1

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

Answer 2

$(selector).remove(filter) удаляет все соответствующие filter элементов в $(selector) см этого примера

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

Answer 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'); 

Существует running example of this on JSFiddle.

Answer 4

Селектор поддерживает только элементы, находящиеся в оберточном объекте. Итак, если вы используете div вместо span внутри и выбираете все divs с помощью wrapper, он работает.

например. 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'); 
});