XML DOM | Remove Node

XML DOM - Remove Node


Hello folks! welcome back to a new edition of our tutorial on XML DOM. In this tutorial post, we are going to be discussing about the remove node operation in an Xml Dom object.

The remove node operation removes the specified node from the document. This operation can be executed to remove the nodes like text node, element node or an attribute node.

The following below are the methods used in performing the remove node operation -

  • removeChild() Method
  • removeAttribute() Method


removeChild() Method

removeChild() method removes the child node indicated by the 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.

Syntax

The following below is the syntax to use the removeChild() method -

Node removeChild(Node oldChild) throws DOMException

Where,

  • oldChild is the node being removed.
  • This method returns the node removed.

Example - Remove Current Node

Following example below is used to parse an xml document (node.xml) into XML DOM object, and removes the specified node, i.e, <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>

Output

Save this file as removecurrentnode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the following -

Before remove operation, total ContactNo elements: 3
After remove operation, total ContactNo elements: 2 


Example - Remove Text Node

The below example is used to parse an xml document (node.xml) into XML DOM object, and then removes the specified child node <FisrtName> -

<!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>

Output

Save file as removetextnode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the following -

Text node of child node before removal is: 1
Text node of child node after removal is: 0 


removeAttribute() Method

The removeAttribute() method removes an attribute of an element by name.

Syntax

The following below is the syntax to use the removeChild() method -

void removeAttribute(java.lang.String name) throws DOMException

Where,

  • name is the name of the attribute to remove.

Example

The below example is used to parse an xml document (node.xml) into 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>

Output

Save file as removeelementattribute_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the following -

Non-Technical
null


Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about XML DOM Clone Node.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.