How can I remove a child node in HTML using JavaScript

Question

Is there a function like document getElementById  FirstDiv   clear

User · Accepted Answer

To answer the original question - there are various ways to do this, but the following would be the simplest.

If you already have a handle to the child node that you want to remove, i.e. you have a JavaScript variable that holds a reference to it:

myChildNode.parentNode.removeChild(myChildNode);

Obviously, if you are not using one of the numerous libraries that already do this, you would want to create a function to abstract this out:

function removeElement(node) {
    node.parentNode.removeChild(node);
}

EDIT: As has been mentioned by others: if you have any event handlers wired up to the node you are removing, you will want to make sure you disconnect those before the last reference to the node being removed goes out of scope, lest poor implementations of the JavaScript interpreter leak memory.

User · Answer

Use the following code     for Internet Explorer document getElementById  FirstDiv   removeNode true      for other browsers var fDiv   document getElementById  FirstDiv    fDiv removeChild fDiv childNodes 0      first check on which node your required node exists  if it is on  0  use this  otherwise use where it exists

User · Answer

If you want to clear the div and remove all child nodes  you could put   var mydiv   document getElementById  FirstDiv    while mydiv firstChild      mydiv removeChild mydiv firstChild

User · Answer

Modern Solution - child remove   For your use case  document getElementById  quot FirstDiv quot   remove    This is recommended by W3C since late 2015  and is vanilla JS  All major browsers support it  Mozilla Docs Supported Browsers - 96  May 2020

User · Answer

var p document getElementById  childId   parentNode      var c document getElementById  childId        p removeChild c       alert  Deleted      p is parent node and c is child node parentNode is a JavaScript variable which contains parent reference  Easy to understand

User · Answer

You have to remove any event handlers you ve set on the node before you remove it  to avoid memory leaks in IE

User · Answer

A jQuery solution  HTML   lt select id  foo  gt     lt option value  1  gt 1 lt  option gt     lt option value  2  gt 2 lt  option gt     lt option value  3  gt 3 lt  option gt   lt  select gt    Javascript     remove child  option  element with a  value  attribute equal to  2      foo  gt  option value  2     remove        remove all child  option  elements     foo  gt  option   remove      References   Attribute Equals Selector  name value      Selects elements that have the   specified attribute with a value   exactly equal to a certain value    Child Selector     parent   child         Selects all direct child elements   specified by  child  of elements   specified by  parent     remove       Similar to  empty    the  remove     method takes elements out of the DOM    We use  remove   when we want to   remove the element itself  as well as   everything inside it  In addition to   the elements themselves  all bound   events and jQuery data associated with   the elements are removed

User · Answer

You should probably use a JavaScript library to do things like this   For example  MochiKit has a function removeElement  and jQuery has remove

User · Answer

You should be able to use the  RemoveNode method of the node or the  RemoveChild method of the parent node

[javascript] How can I remove a child node in HTML using JavaScript?

Examples related to javascript

Examples related to html

Examples related to dom