JavaScript Code Unleashed Level up your skills: Dive Deep with Code Examples, Questions and Explanations of Advanced JavaScript Concepts by Svekis Laurence Lars

Author:Svekis, Laurence Lars
Language: eng
Format: epub
Published: 2024-02-25T00:00:00+00:00

Removing a Specific Element from the DOM

To remove an element from the DOM, you can call the remove() method on that element.

const element = document.getElementById('elementToRemove');

element.remove();

To remove a specific element from the DOM, you can use the element.remove() method. This method removes the element on which it is called from the document.

Removing specific elements from the DOM is a common task in web development, allowing for dynamic updates to the page content in response to user interactions or other conditions. Here are three examples demonstrating different techniques to remove an element from the DOM using vanilla JavaScript.

Example 1: Using parentNode.removeChild()

This traditional method involves calling removeChild() on the parent node of the element you want to remove.

<div id="parent">

<div id="childToRemove">This is the child element to remove.</div>

</div>

<button id="removeChildBtn">Remove Child Element</button>

<script>

document.getElementById('removeChildBtn').addEventListener('click', function() {

var elementToRemove = document.getElementById('childToRemove');

elementToRemove.parentNode.removeChild(elementToRemove);

});

</script>

Example 2: Using Element.remove()

The remove() method allows you to remove the element directly without needing to reference its parent node. This method is not supported in IE.

<div id="elementToRemove">This is the element to remove.</div>

<button id="removeElementBtn">Remove Element</button>

<script>

document.getElementById('removeElementBtn').addEventListener('click', function() {

document.getElementById('elementToRemove').remove();

});

</script>

Example 3: Removing Multiple Elements by Class Name

If you need to remove multiple elements with the same class name, you can use querySelectorAll to select all elements and then loop through them to remove each one.

<div class="elementsToRemove">Element 1</div>

<div class="elementsToRemove">Element 2</div>

<div class="elementsToRemove">Element 3</div>

<button id="removeElementsByClassBtn">Remove Elements by Class</button>

<script>

document.getElementById('removeElementsByClassBtn').addEventListener('click', function() {

var elementsToRemove = document.querySelectorAll('.elementsToRemove');

elementsToRemove.forEach(function(element) {

element.remove();

});

});

</script>

Explanation:

● Example 1 demonstrates the use of parentNode.removeChild(child) where you first select the child element to be removed and then call removeChild on its parent.

● Example 2 showcases the simpler Element.remove() method, which directly removes the selected element from the DOM.

● Example 3 illustrates how to remove multiple elements at once by selecting them through their common class name and using a loop to call remove() on each element.

These examples cover various scenarios where you might need to remove elements from the DOM, providing a range of methods to achieve this with vanilla JavaScript.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.