jQuery remove (selector) dường như không làm việc

Question

Tôi tạo ra một jsfiddle nhỏ: 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'); 
}); 

Vấn đề tôi đang gặp là các lệnh .remove (selector) quá tải không hoạt động. Tôi nghĩ rằng nó có cái gì đó để làm với bộ chọn vai trò dữ liệu của tôi, nhưng bộ chọn loại bỏ bởi lớp không hoạt động tốt.

Tôi có làm gì sai không? Hoặc đây là một lỗi trong jQuery hoặc có thể các tài liệu là sai:

Chúng tôi cũng có thể bao gồm một selector như một tham số tùy chọn

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

Answer 1

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

được giống như

$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) loại bỏ tất cả phù hợp với filter yếu tố trong $(selector), xem ví dụ này

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

Answer 3

Để loại bỏ yếu tố con phù hợp với một bộ chọn bạn có thể sử dụng:

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

Phương pháplà tiếp tục lọc lựa chọn hiện có. Ví dụ ...

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

Nếu tôi chọn tất cả các mục danh sách, tôi có thể sau đó loại bỏ bất kỳ của những mặt hàng trong danh sách đó phù hợp với bộ lọc của tôi:

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

Có một running example of this on JSFiddle.

Answer 4

Bộ chọn chỉ hỗ trợ các phần tử nằm trong đối tượng trình bao bọc. Vì vậy, nếu bạn sử dụng một div thay vì một span bên trong và chọn tất cả các div với như wrapper nó hoạt động.

ví dụ: 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> 

và

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