jQuery remove (selektor) nie wydają się działać

Question

stworzyłem małą 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'); 
}); 

Problem mam jest to, że .Wykręcić (selektor) przeciążenie nie działa. Sądziłem, że ma to coś wspólnego z moim selektorem roli danych, ale selekcja usuwania według klas nie działa tak dobrze.

Czy robię coś nie tak? Czy jest to błąd w jQuery lub może docs są błędne:

Możemy także selektor jako opcjonalny parametr

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

Answer 1

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

jest taka sama jak

$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) usuwa wszystkie pasujące filter elementy w $(selector), zobacz ten przykład

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

Answer 3

Aby usunąć elementy podrzędne, które odpowiadają selektor można użyć:

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

TheMetodasłuży do dalszego filtrowania istniejącego wyboru. Na przykład ...

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

Jeśli wybiorę wszystkich elementów listy, mogę potem usunąć którykolwiek z tych elementów listy pasujących do mojego filtr:

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

Jest running example of this on JSFiddle.

Answer 4

Selektor obsługuje tylko elementy znajdujące się w obiekcie opakowania. Więc jeśli użyjesz div zamiast przęsła wewnątrz i wybierzesz wszystkie elementy div za pomocą wrappera, to działa.

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

i

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