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 -
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
READ: XML DOM | Replace Node
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
READ: XML DOM | Add Node
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
READ: XML DOM | Set Node
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
READ: XML DOM | Get Node
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.
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.