Удаление множества однотипных тегов из DOM

178

25 апреля 2019, 17:50

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? Нужно преобразовать коллецию в массив? Наведите на правильные мысли!

Answer 1

// все такие современные, я тоже могу:  
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> остаются в дереве страницы.

Answer 2

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>

Answer 3

Если поддерживаемые браузеры достаточно современные, можно воспрользоваться методом 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Состояние ajax запроса

Доброй ночиПри выполнении аякс запроса результат возвращается та текущую страницу в div блок

148

javascript

Скрыть/показать input Javascript

Как сделать на JS, чтобы при нажатии на input "Два", input "Скат набок" в блоке Тип кровли был скрыт, а при нажатии input "Один" показан и input "Скат назад"...

183

javascript