jQuery remove(selector) doesn't seem to work -

i created small jsfiddle: http://jsfiddle.net/durxc/

<div data-role="wrapper">     <span class="to-be-removed" data-role="to-be-removed">         text removed     </span> </div> <button id="remove1">remove jquery object</button><br> <button id="remove2">remove selector</button><br> <button id="remove3">remove selector(class)</button>  var $wrapper = $('[data-role="wrapper"]');  $('#remove1').on('click', function () {     $wrapper.find('[data-role="to-be-removed"]').remove(); });  // should work: http://api.jquery.com/remove/ $('#remove2').on('click', function () {     $wrapper.remove('[data-role="to-be-removed"]'); });  // should work: http://api.jquery.com/remove/ $('#remove3').on('click', function () {     $wrapper.remove('.to-be-removed'); }); 

the problem i'm having .remove(selector) overload not working. thought had data-role selector, remove class selector doesn't work well.

am doing wrong? or bug in jquery or maybe docs wrong:

we can include selector optional parameter

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

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

is same

$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(); });  // should work: http://api.jquery.com/remove/ $('#remove2').on('click', function () {     $wrapper.find('[data-role="to-be-removed"]').remove('[data-role="to-be-removed"]'); });  // 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/