How to remove all child elements of a DOM node in JavaScript

0 votes

I have the following HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

And I grab the node I want like so:

var myNode = document.getElementById("foo");

How could I remove the children of foo so that just <p id="foo"></p> is left?

Could I just do:

myNode.childNodes = new Array();

or should I be using some combination of removeElement?

How would I go about removing all of the child elements of a DOM node in JavaScript?

Sep 21, 2020 in Java-Script by kartik
• 37,510 points
1,874 views

1 answer to this question.

0 votes

Hello @kartik,

Use modern Javascript, with remove!

const parent = document.getElementById("foo")
while (parent.firstChild) {
    parent.firstChild.remove()
}

This is a newer way to write node removal in ES5. It is vanilla JS and reads much nicer than relying on parent.

Hope it helps!!
Thank you!!

answered Sep 21, 2020 by Niroj
• 82,880 points

Related Questions In Java-Script

0 votes
1 answer

How to use Redirect in the new react-router-dom of Reactjs?

Hello, To navigate to another component you can ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,880 points
8,408 views
0 votes
1 answer

How to list the properties of a JavaScript object?

Hii @kartik, Use Reflect.ownKeys(): var obj = {a: 1, b: ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,880 points
773 views
0 votes
1 answer

How to open a URL in a new Tab using JavaScript or jQuery?

Hello @kartik, Use window.open(): var win = window.open('http://edureka.co/', '_blank'); if (win) ...READ MORE

answered Aug 25, 2020 in Java-Script by Niroj
• 82,880 points
5,427 views
0 votes
1 answer

How to replace all occurrences of a string?

Hello @kartik, As an alternative to regular expressions ...READ MORE

answered Aug 28, 2020 in Java-Script by Niroj
• 82,880 points
568 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
21,756 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
2,647 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
2,506 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
41,380 views
0 votes
1 answer

How to find event listeners on a DOM node when debugging or from the JavaScript code?

Hii @kartik, It is possible to list all ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,880 points
126,815 views
0 votes
1 answer

How do I turn a string to a json in Node.js?

Hello Kartik, Use the JSON function  JSON.parse(theString) ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,880 points
757 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP