jQuery this.remove() -vs.- $('#id').remove() в Internet Explorer (IE 9 )

#javascript #jquery #internet-explorer

Вопрос:

Почему это this.remove() не работает в IE9 ?

 <input type="button" value="Next1" id="nextButton1">
<br>
<input type="button" value="Next2" id="nextButton2">

$('#nextButton1').on('click', function() {
   this.remove(); // works in all browsers but IE9 
});

$('#nextButton2').on('click', function() {
   $('#nextButton2').remove(); //works in all browsers
});

Живая версия JSFiddle

1. попробуйте $(this).remove()

2. Вы, кажется, предполагаете, что this это объект jQuery. Это не так. Пожалуйста, прочитайте руководство по jQuery : «В дополнение к объекту event функция обработки событий также имеет доступ к элементу DOM, к которому обработчик был привязан с помощью ключевого this слова . Чтобы превратить элемент DOM в объект jQuery, для которого мы можем использовать методы jQuery, мы просто делаем $( this ) , часто следуя этой идиоме: var element = $( this ); »

3. Прокладка: if (!HTMLElement.prototype.remove) HTMLElement.prototype.remove = function() { return this.parentNode.removeChild(this) };

Ответ №1:

Это потому, что вы используете ChildNode.remove() метод, который поддерживается не всеми браузерами.

 this ---> refers to a node. //WARNING: This is an experimental technology

.remove() Однако метод jQuery является кроссбраузерным, поэтому для его использования вам нужно обернуть this следующим $(...) образом:

 $(this).remove();

Дочерний узел.remove() Совместимость с браузером

this.remove() поддерживается следующими настольными браузерами:

 - Chrome 23 
- Firefox 23 
- Opera 10 
- Safari 7

1. Что, если вы хотите удалить только класс this? т.е. $(this.link).remove(); ?? в результате чего все, что имеет класс «link», будет удалено?

2. Как насчет $('.link').remove() ? Возможно, вы хотели бы задать полный вопрос, чтобы мы знали контекст. …. Если контекст this затем попробуйте $(this).filter('.link').remove()

Ответ №2:

Оберните this в jQuery:

 $('#nextButton1').on('click', function() {
   $(this).remove();
});

Ответ №3:

Вы спросили, почему, так вот почему:

В контексте обработчика событий jQuery this ссылается на ссылку на элемент DOM, который jQuery хранит для элемента, для которого вы в данный момент обрабатываете события. Поскольку .remove() функция, которую вы собираетесь использовать, является функцией-членом jQuery, а не встроенной функцией браузера DOM, она работает не так, как ожидалось.

Однако, если вы переносите ссылку DOM внутрь $() or jQuery() , чтобы она стала $(this) вместо this , функция $ or jQuery принимает ссылку DOM в качестве параметра и возвращает ссылку jQuery, для которой затем могут быть вызваны функции-члены jQuery.

Вы всегда можете передать свои ссылки DOM в jQuery и получить ссылки jQuery обратно

Например.

 var test = document.getElementById('test');
$(test).remove();

http://jsfiddle.net/2h45Y/

1. «Поскольку .remove() является функцией-членом jQuery, а не встроенной функцией браузера DOM, она не работает». Но это работает во всех браузерах, кроме IE.

2. @j08691 Отредактировано для ясности.