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:

<?xml version="1.0" encoding="UTF-8"?>
<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>

Example:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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')

Example:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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)

Example:

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

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.

Please Share