Deleting Elements

You may find the need to remove elements from the Document Object Model (DOM). Whether it's because a user action triggers the removal or it's part of your application's state changes, knowing how to properly remove elements is helpful, so let's explore:

Removing a Specific Element

To remove a specific element, you can use the remove() method. This method removes the element on which it's called:

let elementToRemove = document.querySelector('.remove-me');
elementToRemove.remove();

In this example, the element with the class 'remove-me' is selected and then removed from the DOM.

Removing Child Elements

If you want to remove a child element from a specific parent element, you can use the removeChild() method:

let parentElement = document.querySelector('.parent');
let childElement = document.querySelector('.child');
parentElement.removeChild(childElement);

In this example, the element with the class 'child' is removed from the parent element with the class 'parent'.

It's important to note that removeChild() is called on the parent node, not on the child node you want to remove.

Clearing All Child Elements

Sometimes, you might want to remove all child elements of a given parent element. You can do this by looping over the child elements and removing them one by one:

let parentElement = document.querySelector('.parent');

while (parentElement.firstChild) {
    parentElement.removeChild(parentElement.firstChild);
}

In this example, all child elements of the element with the class 'parent' are removed. The while loop continues as long as parentElement has a firstChild, ensuring all child nodes are removed.