Chapter 23. Deleting HTML Elements In JavaScript

29 Views

Deleting HTML elements dynamically is an essential skill in web development, allowing developers to manage the content of web pages interactively. This blog will explore how to delete HTML elements using JavaScript, covering various methods and practical examples.

Removing Elements with `removeChild()`

The removeChild() method removes a specified child node from the DOM.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Removing Elements with removeChild()</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph to be removed.</p>
    </div>
    <button onclick="removeElement()">Remove Paragraph</button>

    <script>
        function removeElement() {
            let container = document.getElementById('container');
            let paragraph = document.getElementById('paragraph');
            container.removeChild(paragraph);
        }
    </script>
</body>
</html>

In this example, clicking the “Remove Paragraph” button removes the paragraph element from the container.

Removing Elements with `remove()`

The remove() method removes the specified element from the DOM.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Removing Elements with remove()</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph to be removed.</p>
    </div>
    <button onclick="removeElement()">Remove Paragraph</button>

    <script>
        function removeElement() {
            let paragraph = document.getElementById('paragraph');
            paragraph.remove();
        }
    </script>
</body>
</html>

In this example, clicking the “Remove Paragraph” button directly removes the paragraph element from the DOM.

Removing Elements by Setting `innerHTML`

You can also remove elements by setting the innerHTML property of the parent element to an empty string.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Removing Elements with innerHTML</title>
</head>
<body>
    <div id="container">
        <p>This is a paragraph to be removed.</p>
    </div>
    <button onclick="clearContainer()">Clear Container</button>

    <script>
        function clearContainer() {
            document.getElementById('container').innerHTML = '';
        }
    </script>
</body>
</html>

In this example, clicking the “Clear Container” button removes all content inside the container div.

Removing Elements with `parentNode.removeChild()`

You can also remove elements by navigating to the parent node and using removeChild().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Removing Elements with parentNode.removeChild()</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph to be removed.</p>
    </div>
    <button onclick="removeElement()">Remove Paragraph</button>

    <script>
        function removeElement() {
            let paragraph = document.getElementById('paragraph');
            paragraph.parentNode.removeChild(paragraph);
        }
    </script>
</body>
</html>

In this example, clicking the “Remove Paragraph” button removes the paragraph element by accessing its parent node and using removeChild().

Removing Elements with Event Listeners

You can add event listeners to dynamically remove elements based on user interactions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Removing Elements with Event Listeners</title>
</head>
<body>
    <div id="container">
        <button class="remove-btn">Remove Me</button>
    </div>

    <script>
        document.querySelector('.remove-btn').addEventListener('click', function() {
            this.remove();
        });
    </script>
</body>
</html>

In this example, clicking the “Remove Me” button removes itself from the DOM using an event listener.

Removing Elements with jQuery

If you are using jQuery, you can use the remove() method to remove elements from the DOM.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Removing Elements with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph to be removed.</p>
    </div>
    <button onclick="removeElement()">Remove Paragraph</button>

    <script>
        function removeElement() {
            $('#paragraph').remove();
        }
    </script>
</body>
</html>

In this example, clicking the “Remove Paragraph” button uses jQuery to remove the paragraph element.

Deleting HTML elements with JavaScript is a crucial skill for managing the content and interactivity of web pages. By mastering methods such as removeChild(), remove(), and parentNode.removeChild(), you can efficiently remove elements from the DOM. Experiment with these techniques to improve your JavaScript skills and build more dynamic and responsive web applications.