Как удалить указанных детей?

<body>
  <p>dfg</p>
  <h1>yoyo</h1>
  <h1>yoyo2</h1>
  <ul>
    <li>somo</li>
   </ul>
 </body>

Например, я хочу удалить только h1 из тела. Остальные дети должны остаться


javascript html removechild
person igodie    schedule 20.11.2016    source источник
comment
Возможный дубликат Удалить элемент по идентификатору   -  person Madhawa Priyashantha    schedule 20.11.2016
comment
Спасибо за этот вопрос. Я только что был на ужине со своим сыном-подростком и задавался тем же вопросом. :)   -  person Paul    schedule 20.11.2016
comment
Какой отец будет удалять своих детей?! И даже не называя их... Это так грустно ????   -  person Myst    schedule 20.11.2016
comment
На самом деле это более точная копия удалить элемент по имени тега   -  person Pineda    schedule 20.11.2016

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете использовать getElementsByTagName для получения HTMLCollection (не массива) тегов h1, которые активны.

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

Javascript-решение:

var h1Elems = document.getElementsByTagName('h1');

for(var i = h1Elems.length - 1;  i >= 0;  i--){
  h1Elems[i].parentElement.removeChild(h1Elems[i]);
}

Посмотрите, как этот код работает в этом jsfiddle

person Pineda    schedule 20.11.2016
comment
Было бы проще просто сказать while (h1Elems.length) h1Elems[0].remove();. - person ; 20.11.2016

arrow_upward
3
arrow_downward

Вы можете использовать селектор CSS.

Вы можете сделать это с помощью jQuery или VanillaJS. Например, вот мой код для VanillaJS.

var headers = document.querySelectorAll('h1');
headers.forEach(function(h) { h.remove(); });

Это эффективно удалит заголовки из DOM.

person gretro    schedule 20.11.2016
comment
Да, при условии, что вы находитесь в среде, в которой forEach определяется в результате querySelectorAll. - person ; 20.11.2016
comment
Если у вас нет доступа к нему, вы можете использовать jQuery (например), чтобы сделать это за вас, или вы можете использовать полифилл. - person gretro; 20.11.2016

arrow_upward
1
arrow_downward

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

function rem(tag) {
  var h = document.querySelectorAll(tag); //return NodeList not array    
  [].forEach.call(h,function(elm) {            
      elm.parentNode.removeChild(elm);
  });
}

//passing tag to remove
rem('p');
<body>
  <p>dfg</p>
  <h1>yoyo</h1>
  <h1>yoyo2</h1>
  <ul>
    <li>somo</li>
  </ul>
</body>

person RizkiDPrast    schedule 20.11.2016
comment
Зачем нужна проверка if (h.parentNode? А вы уверены, что forEach будет работать с результатом querySelectorAll? - person ; 20.11.2016
comment
Спасибо @torazaburo, я столько раз пытался получить if(h.parentNode) результат false, но не смог. Я только что отредактировал свой ответ, в том числе исправив, как мы должны обрабатывать возврат NodeList с помощью querySelectorAll - person RizkiDPrast; 20.11.2016