How to remove an HTML element using JavaScript?

javascript

event-listeners

element-removal

javascript-best-practices

byAnton Shumikhin·Jan 8, 2025

To swiftly eliminate an HTML element, utilize JavaScript's remove() method:

document.querySelector('#elementId').remove(); // 'poof!' it disappears

For comprehensive compatibility, opt for the removeChild() method:

var parent = document.querySelector('#elementId').parentNode;
parent.removeChild(document.querySelector('#elementId')); // element is escorted out politely

Guard against unexpected null values by ensuring element existence before removal:

var element = document.querySelector('#elementId');
if (element) {
    element.remove(); // only removes if the element isn't 'invisible' 
}

Understanding element removal

Using event listeners

Employ addEventListener() for modern event handling, rather than old-school onXYZ attributes:

document.querySelector('#removeBtn').addEventListener('click', function() {
    document.querySelector('#eleToRemove').remove(); // Click! and it's gone
});

Initialising event handlers

To prepare your event listeners, dispatch pageInit() function at the page end:

function pageInit() {
    // Initialization code lives here
}
document.addEventListener('DOMContentLoaded', pageInit); // parties don't start until pageInit walks in

Handling form elements

For submit buttons, inhibit the default form submission:

document.querySelector('#removeBtn').addEventListener('click', function(event) {
    event.preventDefault(); // Stop form submission like a traffic cop
    document.querySelector('#eleToRemove').remove();
});

To avoid unintended form submissions or page refreshes, set your button type to "button":

<button type="button" id="removeBtn">Remove</button>

Advanced removal techniques

Element existence verification

Before launching a removal operation, validate the element's existence:

if (document.contains(document.querySelector('#eleToRemove'))) {
    document.querySelector('#eleToRemove').remove(); // removes the element if it exists and isn't a ghost
}

Embracing jQuery for robust compatibility

jQuery can smoothen the removal process and resolve erratic browser behaviors:

$('#eleToRemove').remove(); // jQuery makes removal as simple as a magic trick

Navigating potential issues

Ensuring element removal

To prevent element reappearance, check for multiple event listener triggers and apply correct button types:

document.querySelector('#removeBtn').addEventListener('click', function() {
    // Redundant event listener? Nope, it's our 'Thanos snap' 
    this.removeEventListener('click', arguments.callee);
    document.querySelector('#eleToRemove').remove();
});