HTML Element .remove() / removeChild()

// Removes the element itself.
element.remove();

// Removes a child element from its parent.
parentElement.removeChild(childElement);

<ul id="list">
	<li id="item1">Item 1</li>
	<li id="item2">Item 2</li>
	<li id="item3">Item 3</li>
</ul>

// Remove the element itself using remove().
var item1 = document.querySelector("#item1");
item1.remove();

// Remove a child element using removeChild().
var list = document.querySelector("#list");
var item3 = document.querySelector("#item3");
list.removeChild(item3);

Running the code above changes the HTML as follows.

<!-- Before -->
<ul id="list">
	<li id="item1">Item 1</li>
	<li id="item2">Item 2</li>
	<li id="item3">Item 3</li>
</ul>

<!-- After item1.remove() -->
<ul id="list">
	<li id="item2">Item 2</li>
	<li id="item3">Item 3</li>
</ul>

<!-- After list.removeChild(item3) -->
<ul id="list">
	<li id="item2">Item 2</li>
</ul>

There are two ways to remove an HTML element from the DOM. element.remove() removes the element itself without needing to reference its parent, making it the simpler option. parentElement.removeChild() removes a specified child from a parent element and is the older DOM Level 1 approach.

parentElement.removeChild() returns the removed element. By storing the return value in a variable, you can reuse the element later — for example, re-inserting it elsewhere with parentElement.appendChild().

Neither method immediately frees the element from memory — it is only detached from the DOM. As long as a variable holds a reference to it, the element's data is retained. If you simply want to discard an element, element.remove() is the recommended choice.