XML DOM - Remove Node

In this chapter, we will study about the XML DOM Remove Node operation. The remove node operation removes the specified node from the document. This operation can be implemented to remove the nodes like text node, element node or an attribute node.
Following are the methods that are used for remove node operation −
removeChild()
removeChild()
removeAttribute()
removeAttribute()
The method removeChild() removes the child node indicated by oldChild from the list of children, and returns it. Removing a child node is equivalent to removing a text node. Hence, removing a child node removes the text node associated with it.
The syntax to use removeChild() is as follows −
Node removeChild(Node oldChild) throws DOMException

Where,
oldChild − is the node being removed.
oldChild − is the node being removed.
This method returns the node removed.
This method returns the node removed.
The following example (removecurrentnode_example.htm) parses an XML document (node.xml) into an XML DOM object and removes the specified node <ContactNo> from the parent node.
<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
               xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         document.write("<b>Before remove operation, total ContactNo elements: </b>");
         document.write(xmlDoc.getElementsByTagName("ContactNo").length);
         document.write("<br>");

         x = xmlDoc.getElementsByTagName("ContactNo")[0];
         x.parentNode.removeChild(x);

         document.write("<b>After remove operation, total ContactNo elements: </b>");
         document.write(xmlDoc.getElementsByTagName("ContactNo").length);
      </script>
   </body>
</html>
In the above example −
x = xmlDoc.getElementsByTagName("ContactNo")[0] gets the element <ContactNo> indexed at 0.
x = xmlDoc.getElementsByTagName("ContactNo")[0] gets the element <ContactNo> indexed at 0.
x.parentNode.removeChild(x); removes the element <ContactNo> indexed at 0 from the parent node.
x.parentNode.removeChild(x); removes the element <ContactNo> indexed at 0 from the parent node.
Save this file as removecurrentnode_example.htm on the server path (this file and node.xml should be on the same path in your server). We get the following result −
Before remove operation, total ContactNo elements: 3
After remove operation, total ContactNo elements: 2 

The following example (removetextNode_example.htm) parses an XML document (node.xml) into an XML DOM object and removes the specified child node <FirstName>.
<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>
      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         x = xmlDoc.getElementsByTagName("FirstName")[0];

         document.write("<b>Text node of child node before removal is:</b> ");
         document.write(x.childNodes.length);
         document.write("<br>");

         y = x.childNodes[0];
         x.removeChild(y);
         document.write("<b>Text node of child node after removal is:</b> ");
         document.write(x.childNodes.length);

      </script>
   </body>
</html>
In the above example −
x = xmlDoc.getElementsByTagName("FirstName")[0]; − gets the first element <FirstName> to the x indexed at 0.
x = xmlDoc.getElementsByTagName("FirstName")[0]; − gets the first element <FirstName> to the x indexed at 0.
y = x.childNodes[0]; − in this line y holds the child node to be remove.
y = x.childNodes[0]; − in this line y holds the child node to be remove.
x.removeChild(y); − removes the specified child node.
x.removeChild(y); − removes the specified child node.
Save this file as removetextNode_example.htm on the server path (this file and node.xml should be on the same path in your server). We get the following result −
Text node of child node before removal is: 1
Text node of child node after removal is: 0 

The method removeAttribute() removes an attribute of an element by name.
Syntax to use removeAttribute() is as follows −
void removeAttribute(java.lang.String name) throws DOMException

Where,
name − is the name of the attribute to remove.
name − is the name of the attribute to remove.
The following example (removeelementattribute_example.htm) parses an XML document (node.xml) into an XML DOM object and removes the specified attribute node.
<!DOCTYPE html>
<html>
   <head>
      <script>
         function loadXMLDoc(filename) {
            if (window.XMLHttpRequest) {
               xhttp = new XMLHttpRequest();
            } else // code for IE5 and IE6 {
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
         }
      </script>
   </head>
   <body>

      <script>
         xmlDoc = loadXMLDoc("/dom/node.xml");

         x = xmlDoc.getElementsByTagName('Employee');

         document.write(x[1].getAttribute('category'));
         document.write("<br>");

         x[1].removeAttribute('category');

         document.write(x[1].getAttribute('category'));

      </script>
   </body>
</html>
In the above example −
document.write(x[1].getAttribute('category')); − value of attribute category indexed at 1st position is invoked.
document.write(x[1].getAttribute('category')); − value of attribute category indexed at 1st position is invoked.
x[1].removeAttribute('category'); − removes the attribute value.
x[1].removeAttribute('category'); − removes the attribute value.
Save this file as removeelementattribute_example.htm on the server path (this file and node.xml should be on the same path in your server). We get the following result −
Non-Technical
null


    41 Lectures 
     5 hours 

 Abhishek And Pukhraj

    33 Lectures 
     3.5 hours 

 Abhishek And Pukhraj

    15 Lectures 
     1 hours 

 Zach Miller

    15 Lectures 
     4 hours 

 Prof. Paul Cline, Ed.D

    13 Lectures 
     4 hours 

 Prof. Paul Cline, Ed.D

    17 Lectures 
     2 hours 

 Laurence Svekis
 Print
 Add Notes
 Bookmark this page