How to remove all elements of a certain class from the DOM?

Question

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

<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>

In jQuery, this would be very easy: $('.hi').remove();. I want to learn JS, and then jQuery.

I am stuck and Google has not provided. I do not want to become a copy/paste jQuery programmer. I am just starting to learn JS. Thanks.

Answer 1

To remove an element you do this:

el.parentNode.removeChild(el); 

MDN is a great reference. Here are a few relevant pages:

Node
parentNode
removeChild

However you'll run into issues if you loop like that since getElementsByClassName returns a live list, when you remove a node the element is removed from the list as well so you shouldn't increment or you will end up skipping every other element. Instead just continually remove the first element in the list, until there is no first element:

var paras = document.getElementsByClassName('hi');  while(paras[0]) {     paras[0].parentNode.removeChild(paras[0]); }​ 

---

IMO jQuery is great at showing you what is possible to do in Javascript. I actually recommend that after about a week or two of plain JS you learn jQuery, get good at it, and remember what it's abstracting away. One day when you have an excellent grasp of Javascript scoping, objects, and such which you can obtain while using jQuery, go back and try learning how to interact better with the DOM without a library. That way you'll have an easier time learning plain JS and you'll appreciate the abstraction that libraries can provide you even more, while learning that when you only need one or two things a library provides you may be able to write them yourself without including the entire library.