JavaScript removeNode() method
Some times programmer may needs to remove some node according to their requirements while using JavaScript. There is a method removeNode() provided in JavaScript for removing nodes accordingly by getting its element's reference.
We can use removeNode() method to delete specified node from the given element's hierarchy. It returns a reference to the node object removed. Following is the syntax of removeNode() method:
Syntax :
| element_object.removeNode( childFlag ); |
where element_object is the element's reference to apply method on it and parameter passed to the method childFlag is a boolean value and indicates that whether method is to remove itself only (i.e without its children) or with its children. If this value is true, it means method have to remove its child elements also and if false, it means that it doesn't need to remove child elements.
Description of Code :
In the following example we have created four buttons named "Button1", "Button2", "Button3" and "Button4". On these button's click event we have called four different functions which removes that button by using the method removeNode() on that specified element. Here is the full HTML code for removeNode() method's example :
<html>
<head>
<script language="JavaScript">
function removeButton1(){
document.getElementById('btn1').removeNode(true);
alert("Button 1 removed");
}
function removeButton2(){
document.getElementById('btn2').removeNode(true);
alert("Button 2 removed");
}
function removeButton3(){
document.getElementById('btn3').removeNode(true);
alert("Button 3 removed");
}
function removeButton4(){
document.getElementById('btn4').removeNode(true);
alert("Button 4 removed");
}
</script>
</head>
<body>
<div style="background: #ff9900; width:'100%';"
align="center">
<font color="#0000ff" size="12pt">
<b>Remove Node Example</b>
</font>
</div>
<center>
<div style="background: #0099ff; width:'100%';" align="center">
<p>Button 1 <input id="btn1" type="button" value="Button1"
onClick="removeButton1()" /></p>
<p>Button 2 <input id="btn2" type="button" value="Button2"
onClick="removeButton2()" /></p>
<p>Button 3 <input id="btn3" type="button" value="Button3"
onClick="removeButton3()" /></p>
<p>Button 4 <input id="btn4" type="button" value="Button4"
onClick="removeButton4()" /></p>
</div>
</center>
</body>
</html>
|
Output :
Removed Button 1
Removed Button 2
Removed Button 4
You can also download the full source code by the following link :
