0

var elCost = document.querySelectorAll('.not-avail .price-new');
for(var i = 0; i < elCost.length; i++) {
  elCost[i].parentNode.removeChild(elCost);
}
<div class="not-avail">
    <span class="price-new">190</span>
</div>
<div class="not-avail">
    <span class="price-new">700</span>
</div>
<div class="not-avail">
    <span class="price-new">300</span>
</div>

Почему код не удаляет теги span с классом price-new? Нужно преобразовать коллецию в массив? Наведите на правильные мысли!

3 ответа 3

3

// все такие современные, я тоже могу: 
document.querySelectorAll('.not-avail .price-new').forEach(el => el.remove());
// или по старинке:
/* 
var elCost = document.querySelectorAll('.not-avail .price-new');
for(var i = 0; i < elCost.length; i++) {
  elCost[i].parentNode.removeChild(elCost[i]); // [i] !!!
}
*/
.not-avail {
  border:1px solid black;
  background:lightgreen;
  padding:8px;
  margin:4px;
}
<div class="not-avail">
    <span class="price-new">190</span>
</div>
<div class="not-avail">
    <span class="price-new">700</span>
</div>
<div class="not-avail">
    <span class="price-new">300</span>
</div>

Обратите внимание на то, что элементы <div class="not-avail"></div> остаются в дереве страницы.

1

elCost[i].parentNode.removeChild(elCost);

Этим выражением вы удаляете не конкретный элемент, а пытаетесь удалить всю коллекцию (которая, очевидно, не является дочерним элементом родителя elCost).

Можно воспользоваться методом remove(), который удаляет непосредственно сам элемент, без необходимости обращения к его родителю (а уже от него к искомому элементу).

var elCost = document.querySelectorAll('.not-avail .price-new');
for(var i = 0; i < elCost.length; i++) {
  elCost[i].remove();
}
<div class="not-avail">
    <span class="price-new">190</span>
</div>
<div class="not-avail">
    <span class="price-new">700</span>
</div>
<div class="not-avail">
    <span class="price-new">300</span>
</div>

0

Если поддерживаемые браузеры достаточно современные, можно воспрользоваться методом remove:

var elCost = document.querySelectorAll('.not-avail .price-new');

for (var i = 0; i < elCost.length; i++) {
  elCost[i].remove();
}
.not-avail {
  border:1px solid black;
  background:lightgreen;
  padding:8px;
  margin:4px;
}
<div class="not-avail">
    <span class="price-new">190</span>
</div>
<div class="not-avail">
    <span class="price-new">700</span>
</div>
<div class="not-avail">
    <span class="price-new">300</span>
</div>

А при наличии ES6 можно ещё воспользоваться циклом for of:

for (var el of document.querySelectorAll('.not-avail .price-new')) {
  el.remove();
}
.not-avail {
  border:1px solid black;
  background:lightgreen;
  padding:8px;
  margin:4px;
}
<div class="not-avail">
    <span class="price-new">190</span>
</div>
<div class="not-avail">
    <span class="price-new">700</span>
</div>
<div class="not-avail">
    <span class="price-new">300</span>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.