Разница между $ ('# foo'). Remove ('a') и $ ('# foo'). Find ('a'). Remove()

Question

Я пытаюсь отредактировать строку HTML (из textarea) с помощью jQuery. Когда я использую этот код, ссылки удаляются из результирующей строки, как и ожидалось:

 $('#foo').find('a').remove(); 
     $('#foo').html(); // links are removed, as expected 

Но когда я использую следующий код, ссылки не удаляются.

 $('#foo').remove('a'); 
     $('#foo').html(); // links are still there 

Почему это не работает? Я прочитал API jQuery documentation for .remove(), и я до сих пор не понимаю.

Answer 1

Селектор 'a' - фильтр верхнего уровня. Он принимает текущий набор, ищет элементы, которые соответствуют селектору, и удаляет их.

$('#foo').remove('a'); 

Фильтр не ищет вложенные элементы.

Так что, если вы сделали это ...

$('.myClass').remove('a'); 

... и селектор .myClass соответствуют следующие элементы ...

<p class="myClass">a paragraph</p> 
<a class="myClass">an anchor</a> <!-- will be removed --> 
<p class="myClass"> 
    <a>a NESTED anchor</a> 
</p> 
<a class="myClass">an anchor</a> <!-- will be removed --> 
<a class="myClass">an anchor</a> <!-- will be removed --> 
<p class="myClass"> 
    <a>a NESTED anchor</a> 
</p> 
<p class="myClass">a paragraph</p> 

... то только <a> элементов на верхний уровень будет удален из набора

Answer 2

remove действует на набор элементов , что у вас есть alrea dy соответствует, при желании, фильтрацию можно установить еще дальше, если вы передадите ему аргумент. Итак, вот что каждая версия делает:

Найти все <a> потомков #foo и удалить их:

$('#foo').find('a').remove(); 

Найти все <a> элементов, которые находятся в наборе #foo и удалить их:

$('#foo').remove('a'); 

Так что этот последний ничего не сделает, если #foo не является <a> сам; если он - (<a id="foo">), то этот элемент будет удален. Это по сути то же самое, что если бы вы написали

$('a#foo').remove(); 

Надеюсь, это поможет. :)

Answer 3

разница является

$('#foo').remove('a');//This will help to get rid of <a /> in the dom structure. 
$('#foo').remove();//This will remove the element with id foo