Definition and Usage..
The removeChild() method removes a specified child node of the specified element.
Returns the removed node as a Node object, or null if the node does not exist.
Note: The removed child node is no longer part of the DOM. However, with the reference returned by this method, it is possible to insert the removed child to an element at a later time (See "More Examples").
Tip: Use the appendChild() or insertBefore() method to insert the removed node into the same document. To insert it to another document, use the document.adoptNode() or document.importNode() method.
Syntax: node.removeChild(node)
CODING:The removeChild() method removes a specified child node of the specified element.
Returns the removed node as a Node object, or null if the node does not exist.
Note: The removed child node is no longer part of the DOM. However, with the reference returned by this method, it is possible to insert the removed child to an element at a later time (See "More Examples").
Tip: Use the appendChild() or insertBefore() method to insert the removed node into the same document. To insert it to another document, use the document.adoptNode() or document.importNode() method.
Syntax: node.removeChild(node)
<!DOCTYPE html>
<html>
<body>
<!-- Note that the <li> elements inside <ul> are not indented (whitespaces).
If they were, the first child node of <ul> would be a text node
-->
<ul id="ul1"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove1()">Remove</button>
<ul id="ul2"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove2()">Remove</button>
<ul id="ul3"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove3()">Remove All</button>
<ul id="ul4"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove4()">Remove All</button>
<ul id="ul5"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li><li id="e">ERLANG</li></ul>
<button onclick="remove5()">Remove ER.</button>
<button onclick="add1()">ADD ER.</button>
<script>
var list;
function remove1() {
ul1.removeChild(ul1.childNodes[0]);
}
function remove2() {
if (ul2.hasChildNodes()) {
ul2.removeChild(ul2.childNodes[0]); }
}
function remove3() {
ul3.parentNode.removeChild(ul3);
}
function remove4() {
while (ul4.hasChildNodes()) {
ul4.removeChild(ul4.firstChild); }
}
var erlang;
function remove5() {
erlang=document.getElementById("e");
erlang.parentNode.removeChild(e);//removeChild(erlang)
}
function add1() {
ul5.appendChild(erlang);
}
</script>
</body>
</html>
<html>
<body>
<!-- Note that the <li> elements inside <ul> are not indented (whitespaces).
If they were, the first child node of <ul> would be a text node
-->
<ul id="ul1"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove1()">Remove</button>
<ul id="ul2"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove2()">Remove</button>
<ul id="ul3"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove3()">Remove All</button>
<ul id="ul4"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li></ul>
<button onclick="remove4()">Remove All</button>
<ul id="ul5"><li>HTML</li><li>CSS</li><li>JAVA SCRIPT</li><li id="e">ERLANG</li></ul>
<button onclick="remove5()">Remove ER.</button>
<button onclick="add1()">ADD ER.</button>
<script>
var list;
function remove1() {
ul1.removeChild(ul1.childNodes[0]);
}
function remove2() {
if (ul2.hasChildNodes()) {
ul2.removeChild(ul2.childNodes[0]); }
}
function remove3() {
ul3.parentNode.removeChild(ul3);
}
function remove4() {
while (ul4.hasChildNodes()) {
ul4.removeChild(ul4.firstChild); }
}
var erlang;
function remove5() {
erlang=document.getElementById("e");
erlang.parentNode.removeChild(e);//removeChild(erlang)
}
function add1() {
ul5.appendChild(erlang);
}
</script>
</body>
</html>
Comments
Post a Comment