By Vishal Basumatary in javascript — Mar 24, 2023

How to delete an html element

How to Delete an HTML Element

Deleting an HTML element can be necessary for various reasons such as updating the design, improving accessibility, or removing outdated information. There are several ways to delete an HTML element and below are some of the most common methods.

Method 1: Using Javascript

One way to delete an HTML element is by using Javascript. This method is useful when you want to delete an element dynamically, i.e., based on user interaction. For instance, when a user clicks a button, a specific element can be removed from the page.

To delete an HTML element using Javascript, you need to:

Select the element you want to delete using its ID or class name.
Call the remove() method on the selected element.


//select the element to be deleted
const elemToDelete = document.querySelector("#elementID");

//delete the element
elemToDelete.remove();

Method 2: Using CSS

If you want to hide an HTML element without deleting it completely, you can use CSS to accomplish this. By setting the display property to none, the element will not be visible on the webpage but still exists in the code.


/* hide the element using CSS */
#elementID {
    display: none;
}

Method 3: Using HTML

You can also delete an HTML element directly from the source code without using any scripting or styling. This method is useful when you want to permanently remove an element from a webpage.

To delete an HTML element using HTML only, you need to:

Locate the element in the HTML code.
Delete the code block that contains the element.


<div id="elementID">
    <p>This is the text inside the element.</p>
</div>

/* delete the block of code that contains the element */

In conclusion, deleting an HTML element can be achieved using various methods. The method you choose depends on your specific needs and requirements. By using Javascript, CSS, or HTML, you can easily manipulate the structure and content of your webpages.