XML DOM Remove Nodes

Deleting elements and attributes from XML

🗑️ What is Removing Nodes?

Removing nodes means deleting elements or attributes from your XML document. You can remove entire elements, delete specific attributes, or clear child nodes. This helps you clean up and manage your XML data structure. 


// Remove a child element
parent.removeChild(child);
// Remove an attribute
element.removeAttribute("id");

Node Removal Methods

XML DOM provides methods to delete nodes and attributes from your document. You can remove individual elements, delete attributes, or clear entire sections. Always get the parent node first when removing child elements.

❌

Remove Child

Delete a child element 

removeChild()
🏷️

Remove Attribute

Delete an attribute 

removeAttribute()
🧹

Clear Content

Remove all child nodes 

textContent = ""
👨‍👦

Parent Node

Access parent to remove child 

parentNode

🔹 Sample XML Data

We'll use this XML for removal examples: 

<?xml version="1.0"?>
<inventory>
    <item id="I001" status="active">
        <name>Keyboard</name>
        <price>49.99</price>
        <stock>25</stock>
    </item>
    <item id="I002" status="discontinued">
        <name>Old Mouse</name>
        <price>15.99</price>
        <stock>0</stock>
    </item>
    <item id="I003" status="active">
        <name>Monitor</name>
        <price>299.99</price>
        <stock>10</stock>
    </item>
</inventory>

🔹 Remove a Child Element

Delete an element using removeChild(): 

// Get the parent (inventory)
var inventory = xmlDoc.getElementsByTagName("inventory")[0];

// Get the item to remove (second item)
var itemToRemove = xmlDoc.getElementsByTagName("item")[1];

// Count before removal
console.log("Items before: " + inventory.getElementsByTagName("item").length);

// Remove the item
inventory.removeChild(itemToRemove);

// Count after removal
console.log("Items after: " + inventory.getElementsByTagName("item").length);

Output:

Items before: 3

Items after: 2

🔹 Remove Using Parent Node

Remove an element by accessing its parent: 

// Get the element to remove
var item = xmlDoc.getElementsByTagName("item")[0];
var name = item.getElementsByTagName("name")[0];

console.log("Removing: " + name.textContent);

// Get parent and remove the item
var parent = item.parentNode;
parent.removeChild(item);

console.log("Item removed successfully");

Output:

Removing: Keyboard

Item removed successfully

🔹 Remove an Attribute

Delete an attribute using removeAttribute(): 

// Get first item
var item = xmlDoc.getElementsByTagName("item")[0];

// Show original attributes
console.log("Before - ID: " + item.getAttribute("id"));
console.log("Before - Status: " + item.getAttribute("status"));

// Remove the status attribute
item.removeAttribute("status");

// Show after removal
console.log("After - ID: " + item.getAttribute("id"));
console.log("After - Status: " + item.getAttribute("status"));

Output:

Before - ID: I001

Before - Status: active

After - ID: I001

After - Status: null

🔹 Remove Multiple Elements

Remove elements based on a condition: 

// Get all items
var items = xmlDoc.getElementsByTagName("item");
var inventory = xmlDoc.getElementsByTagName("inventory")[0];

console.log("Total items: " + items.length);

// Remove items with status="discontinued"
for (var i = items.length - 1; i >= 0; i--) {
    if (items[i].getAttribute("status") === "discontinued") {
        var name = items[i].getElementsByTagName("name")[0].textContent;
        console.log("Removing: " + name);
        inventory.removeChild(items[i]);
    }
}

console.log("Remaining items: " + items.length);

Output:

Total items: 3

Removing: Old Mouse

Remaining items: 2

🔹 Remove All Child Nodes

Clear all children from an element: 

// Get first item
var item = xmlDoc.getElementsByTagName("item")[0];

// Count children before
var childCount = item.getElementsByTagName("*").length;
console.log("Children before: " + childCount);

// Remove all children
while (item.firstChild) {
    item.removeChild(item.firstChild);
}

// Count after
childCount = item.getElementsByTagName("*").length;
console.log("Children after: " + childCount);

Output:

Children before: 3

Children after: 0

🔹 Complete Remove Example

Full example showing various removal techniques: 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xmlText = `<inventory>
    <item id="I001" status="active">
        <name>Keyboard</name>
        <price>49.99</price>
    </item>
    <item id="I002" status="discontinued">
        <name>Old Mouse</name>
        <price>15.99</price>
    </item>
</inventory>`;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "text/xml");

var inventory = xmlDoc.getElementsByTagName("inventory")[0];
var items = xmlDoc.getElementsByTagName("item");

// Show before
var output = "BEFORE: " + items.length + " items<br><br>";

// Remove discontinued items
for (var i = items.length - 1; i >= 0; i--) {
    if (items[i].getAttribute("status") === "discontinued") {
        var name = items[i].getElementsByTagName("name")[0].textContent;
        output += "Removing: " + name + "<br>";
        inventory.removeChild(items[i]);
    }
}

// Show after
output += "<br>AFTER: " + items.length + " items";

document.getElementById("demo").innerHTML = output;
</script>

</body>
</html>

Output:

BEFORE: 2 items

Removing: Old Mouse

AFTER: 1 items

🧠 Test Your Knowledge

Which method removes a child element?