Вопрос по javascript – Удалить все элементы определенного класса с помощью JavaScript

37

HTML:

<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>

JS, что у меня так далеко:

var paras = document.getElementsByClassName('hi');

for(var i = 0; i < paras.length; i++) {
    paras[i].style.color = '#ff0011';
    // $('.hi').remove();
}​

В jQuery это было бы слишком просто. ($('.hi').remove();). Я хочу изучать JS, а затем jQuery.

Я застрял и Google не предоставил. Я не хочу стать программистом jQuery для копирования / вставки. Я только начинаю изучать JS. Благодарю.

Проголосовал за желание изучать JS до jQuery. И не желая просто копировать + вставить. И за хороший вопрос. Matt

Ваш Ответ

3   ответа
75

Чтобы удалить элемент, вы делаете это:

el.parentNode.removeChild(el);

MDN - отличная ссылка. Вот несколько соответствующих страниц:

Узел
ParentNode
RemoveChild

Тем не менее, у вас возникнут проблемы, если вы зациклились такgetElementsByClassName возвращает живой список, когда вы удаляете узел, элемент также удаляется из списка, поэтому вы не должны увеличивать его, иначе вы пропустите все остальные элементы. Вместо этого просто непрерывно удаляйте первый элемент в списке, пока не появится первый элемент:

var paras = document.getElementsByClassName('hi');

while(paras[0]) {
    paras[0].parentNode.removeChild(paras[0]);
}​

IMO jQuery отлично показывает, что можно делать в Javascript. Я на самом деле рекомендую, чтобы примерно через неделю или две обычного JS вы изучали jQuery, хорошо разбирались в нем и помнили, что он абстрагирует. Однажды, когда вы отлично разберетесь в области видимости Javascript, объектах и подобных объектах, которые вы можете получить при использовании jQuery, вернитесь и попробуйте узнать, как лучше взаимодействовать с DOM без библиотеки. Таким образом, вам будет легче изучать простой JS, и вы оцените абстракцию, которую библиотеки могут предоставить вам еще больше, при этом учась, что, когда вам нужна только одна или две вещи, которые предоставляет библиотека, вы сможете писать их самостоятельно, без включая всю библиотеку.

Извините за задержку с ответом. Еще раз спасибо за всю полезную информацию. Я немного использовал трюк в $ 0 в своем обучении. Ваши очки имеют для меня очень хороший смысл, и я буду следовать им. Ура, PaulPRO! :) jonathanbell
@ jonny.milano Добро пожаловать, и нет. Я бы на самом деле рекомендовал против этого. Хотя исходный код jQuery хорошо документирован, он немного запутан из-за того, что он учитывает несколько ошибок браузера, имеет несколько исправлений ошибок в своем собственном коде и написан для оптимизации для браузера, а не для программиста, который его читает. Он очень большой, поэтому вам приходится много прыгать, чтобы отследить вызовы функций. Это определенно стоит прочитать, если вы заинтересованы в этом, но только до тех пор, пока вы не приобретете большой опыт работы с Javascript.
Ух, отличный и подробный ответ! :) Огромное спасибо. Логика чиста и лаконична. Интересно, что вы рекомендуете сначала изучить jQuery. Вокруг этого предмета, кажется, есть два разделенных лагеря. Действительно, я нахожу jQuery намного проще в освоении. Вы бы порекомендовали прочитать исходный код jQuery как способ изучения методов, подобных тому, о котором я написал вопрос? jonathanbell
Год 2017: Современные браузеры принимают метод .remove () !!css-tricks.com/now-ever-might-not-need-jquery/… jonathanbell
@ jonny.milano Я думаю, что вам лучше читать страницы в ссылках, таких как MDN, а самим пытаться понять, как они реагируют. Также убедитесь, что у вас есть хорошая консоль для игры и можно использовать такие вещи, как console.log. Инструменты разработчика Chrome имеют приятную особенность, при которой, если вы выделите элемент на странице элементов, вы можете ссылаться на него из консоли, используя переменную$0.
2

ла вам нужно получить родительский элемент, а затем использовать родительский элемент для удаления элемента. Попробуй это:

var parent = paras[i].parentNode;
parent.removeChild(paras[i]);
15
[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

Here I'm using Array.prototype.forEach легко пройти через все элементы в массивоподобном объекте, то есть статический NodeList, возвращаемыйquerySelectorAll, а затем с помощьюremoveChild() удалить элемент из DOM.

Для старых браузеров, которые не поддерживаютquerySelectorAll() или жеforEach():

var classMatcher = /(?:^|\s)hi(?:\s|$)/;
var els = document.getElementsByTagName('*');
for (var i=els.length;i--;){
  if (classMatcher.test(els[i].className)){
    els[i].parentNode.removeChild(els[i]);
  }
}

Note that because getElementsByTagName возвращаетlive NodeList, вы должны перебирать элементы от начала до конца, удаляя их из DOM.

Существуют также некоторые старые браузеры, которые не поддерживаютquerySelectorAll но это поддерживаютgetElementsByClassName, который вы могли бы использовать для повышения производительности и сокращения кода.

@RobG Меры предосторожности, как что? Презервативы? : p Это работает во всех современных браузерах, и (пока)de facto стандартное поведение, вероятно, будет и впредь поддерживаться для обратной совместимости, мириться с дураками, такими как я, которые когда-то полагались на него
Не вызывайте собственные методы на хост-объектах без принятия мер предосторожности, они не обязательно должны поддерживаться и не поддерживаются в некоторых браузерах.
@RobG Спасибо за предоставленную информацию.
К сожалению, "современный" браузеры - это подмножество используемых браузеров. В большинстве случаев «современный» определяется как «браузеры, которые не ломаются при использовании моего кода». Но IE 8 в режиме quirks по крайней мере не имеет qSA и даже в стандартном режиме выдает ошибку, если объекты хоста передаются встроенным методам. IE 8 используется примерно 50% пользователей IE, поэтому он не может быть «современным», но его нельзя игнорировать, если вы хотите написать надежный код для общей сети.

Похожие вопросы