Question

181

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

rated 0 times [ 184] [ 3] / answers: 1 / hits: 99488 / 12 Years ago, thu, may 31, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaredsages

Add To Favorites

Follow

Total Points: 273

Total Questions: 97

Total Answers: 105

Location: French Southern and Antarctic Lands

Member since Fri, Jan 6, 2023

1 Year ago

jaredsages questions

1 Unexpected reserve word 'await'

Tue, Aug 17, 21, 00:00, 3 Years ago

1 React.JS App MODULE_NOT_FOUND error on 'npm start'

Sun, Jan 10, 21, 00:00, 3 Years ago

1 Next-Pwa not working on production server such as Nginx

Fri, Oct 23, 20, 00:00, 4 Years ago

1 How to call Vue instance in chrome console, if he created in a separated file

Mon, Aug 31, 20, 00:00, 4 Years ago

1 Record voice with recorder.js and upload it to python-flask server, but WAV file is broken

Mon, Feb 3, 20, 00:00, 4 Years ago

View All

answered 12 Years ago davisbrandtm · Accepted Answer

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.