XML DOM Remove Nodes

To remove a specified node, the removeChild() method is used, while a specified attribute can be removed using the removeAttribute() method.

Remove an Element Node:

A specified node is removed by the removeChild() method. Removing a node means removing all its child nodes along with it.

Books.xml:

<author>Author Name</author>

</book>

<title lang="en">XQuery Book</title>

<author>Author 1</author>

<author>Author 2</author>

<author>Author 3</author>

<author>Author 4</author>

</book>

</bookstore>

<bookstore> <book category="Child"> <title lang="en">ABC</title> <author>Author Name</author> <year>2020</year> <price>100.00</price> </book> <book category="IT"> <title lang="en">XQuery Book</title> <author>Author 1</author> <author>Author 2</author> <author>Author 3</author> <author>Author 4</author> <year>2005</year> <price>350.00</price> </book> </bookstore>




  
    ABC
    Author Name
    2020
    100.00
  

  
    XQuery Book
    Author 1
    Author 2
    Author 3
    Author 4
    2005
    350.00

Example:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var xmlDoc = xml.responseXML;

var root = xmlDoc.documentElement;

var currNode = root.childNodes[1];

removedNode = currNode.removeChild(currNode.childNodes[1]);

document.getElementById("hello").innerHTML =

"Node Removed: " + removedNode.nodeName;

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var root = xmlDoc.documentElement; var currNode = root.childNodes[1]; removedNode = currNode.removeChild(currNode.childNodes[1]); document.getElementById("hello").innerHTML = "Node Removed: " + removedNode.nodeName; } </script>

Output:

Explanation:

In the above example, we are removing the first <book> element from the books.xml. For this, we will first load “books.xml” in the xmlDoc. The element node to be removed will be set as variable y. Using the removeChild() method, we will remove the element node by from the parent node.

Remove the Current Node:

To remove a specified node, there is only one way and that is the removeChild() method. Using the parentNode property and the removeChild() method, we can remove the desired node after navigating to it.

Example:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var x, xmlDoc, txt;

xmlDoc = xml.responseXML;

txt = "Total number of book nodes: " +

xmlDoc.getElementsByTagName("book").length + "<br>";

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

x.parentNode.removeChild(x);

txt += "Number of book nodes left: " +

xmlDoc.getElementsByTagName("book").length;

document.getElementById("hello").innerHTML = txt;

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, xmlDoc, txt; xmlDoc = xml.responseXML; txt = "Total number of book nodes: " + xmlDoc.getElementsByTagName("book").length + "<br>"; x = xmlDoc.getElementsByTagName("book")[0]; x.parentNode.removeChild(x); txt += "Number of book nodes left: " + xmlDoc.getElementsByTagName("book").length; document.getElementById("hello").innerHTML = txt; } </script>

Output:

Explanation:

We will first load “books.xml” in the xmlDoc. The element node to be removed will be set as the variable y. The parentNode property and the removeChild() method can then be used to remove the element node.

Remove a Text Node:

We can also remove a text node using the removeChild() method.

Example:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var x, y, xmlDoc, txt;

xmlDoc = xml.responseXML;

txt = "";

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

txt += "Number of Child nodes: " + x.childNodes.length +"<br>";

y = x.childNodes[0];

x.removeChild(y);

txt += "Number of left Child nodes: " + x.childNodes.length;

document.getElementById("hello").innerHTML = txt;

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, y, xmlDoc, txt; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("title")[0]; txt += "Number of Child nodes: " + x.childNodes.length +"<br>"; y = x.childNodes[0]; x.removeChild(y); txt += "Number of left Child nodes: " + x.childNodes.length; document.getElementById("hello").innerHTML = txt; } </script>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. The first title element node will be set as the variable x and the text node to be removed will be set as the variable y. Using the removeChild() method, we will remove the element node from the parent node.

Clear a Text Node:

The nodeValue property is commonly used to remove the text from a node instead of the removeChild() method. We can change the value of a text node using the nodeValue property.

Example:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var x, xmlDoc, txt;

xmlDoc = xml.responseXML;

x = xmlDoc.getElementsByTagName("year")[1].childNodes[0];

txt = "Node Value: " + x.nodeValue + "<br>";

x.nodeValue = "";

txt += "Value left: " + x.nodeValue;

document.getElementById("hello").innerHTML = txt;

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, xmlDoc, txt; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("year")[1].childNodes[0]; txt = "Node Value: " + x.nodeValue + "<br>"; x.nodeValue = ""; txt += "Value left: " + x.nodeValue; document.getElementById("hello").innerHTML = txt; } </script>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc to get the first title element’s first child node. We will then clear the text from the text node using the nodeValue property.

Remove an Attribute Node by Name:

To remove an attribute node by its name, the removeAttribute() method can be used.

Example: To remove the “category” attribute in the first <book> element:

removeAttribute('category')

removeAttribute('category')

Example:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var xmlDoc = xml.responseXML;

var x = xmlDoc.getElementsByTagName("book");

document.getElementById("hello").innerHTML =

x[0].getAttribute('category') + "<br>";

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

document.getElementById("hello").innerHTML +=

x[0].getAttribute('category');

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var x = xmlDoc.getElementsByTagName("book"); document.getElementById("hello").innerHTML = x[0].getAttribute('category') + "<br>"; x[0].removeAttribute('category'); document.getElementById("hello").innerHTML += x[0].getAttribute('category'); } </script>

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then get the book nodes using the getElementsByTagName() method. Now, from the first book element node, we will remove the “category” attribute.

Example: To loop through and to remove the “category” attribute of all <book> elements:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var i, x, y, xLen, xmlDoc, txt;

xmlDoc = xml.responseXML;

x = xmlDoc.getElementsByTagName('book');

xLen = x.length;

txt = "";

// Remove the value of all "category" attributes

for (i = 0; i <xLen; i++) {

y = x.item(i);

y.removeAttribute('category');

}

// Print the value of all "category" attributes

for (i = 0; i < x.length; i++) {

txt += x[i].getAttribute('category') + "<br>";

}

document.getElementById("hello").innerHTML = txt;

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var i, x, y, xLen, xmlDoc, txt; xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName('book'); xLen = x.length; txt = ""; // Remove the value of all "category" attributes for (i = 0; i <xLen; i++) { y = x.item(i); y.removeAttribute('category'); } // Print the value of all "category" attributes for (i = 0; i < x.length; i++) { txt += x[i].getAttribute('category') + "<br>"; } document.getElementById("hello").innerHTML = txt; } </script>

Output:

Remove Attribute Nodes by Object:

To remove an attribute node, using the node object as a parameter, the removeAttributeNode() method is used.

Example: To remove all the attributes of all the <book> elements:

removeAttributeNode(x)

removeAttributeNode(x)

Example:

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var x, i, attnode, del_att, xmlDoc, txt;

xmlDoc = xml.responseXML;

txt = "";

x = xmlDoc.getElementsByTagName('book');

for (i = 0; i < x.length; i++) {

while (x[i].attributes.length > 0) {

attnode = x[i].attributes[0];

del_att = x[i].removeAttributeNode(attnode);

txt += "Removed: " + del_att.nodeName +

": " + del_att.nodeValue + "<br>";

}

document.getElementById("hello").innerHTML = txt;

}

</script>

<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "books.xml", true); xhttp.send(); function myFunction(xml) { var x, i, attnode, del_att, xmlDoc, txt; xmlDoc = xml.responseXML; txt = ""; x = xmlDoc.getElementsByTagName('book'); for (i = 0; i < x.length; i++) { while (x[i].attributes.length > 0) { attnode = x[i].attributes[0]; del_att = x[i].removeAttributeNode(attnode); txt += "Removed: " + del_att.nodeName + ": " + del_att.nodeValue + "<br>"; } } document.getElementById("hello").innerHTML = txt; } </script>

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then get the book nodes using the getElementsByTagName() method. We will then check if there are any attributes for each book element. We will remove the attribute if there is an attribute in a “book” element.