Home Javascript JavaScript removeNode() method

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript removeNode() method

Advertisement
Some times programmer may needs to remove some node according to their requirements while using JavaScript.

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 :

Download Source Code

     

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: February 7, 2009

Related Tutorials

Discuss: JavaScript removeNode() method   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:1
Jeremy Harris
December 11, 2011
Is not valid code

Doesn't work outside of IE. Use document.getElementById('x').parentNode.removeChild(document.getElementById('x')); Or elem.parentNode.removeChild(elem);
DMCA.com