JavaScript remove elements

As we created new elements in JavaScript yesterday, I thought I'd be a good article for today to remove certain elements from the DOM.

To remove elements we simply need to get them in JavaScript using any technique really.

Let's say we want to remove a div with the ID custom_id.

const elem = document.getElementById('custom_id');
elem.remove();

And yes, that's how simple it is!

Hiding elements in JavaScript

But perhaps you only want to hide it for a brief moment?
We can also modify the script to make the element invisible for a while.

const hidden = document.getElementById('hidden_id');
hidden.style.display = 'none';

And that will make your element hidden until you make it visible again.

Making it visible can be achieved by swapping the display to block/flex/inline.

const hidden = document.getElementById('hidden_id');
hidden.style.display = 'block';

Feel free to check this out on Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Alex Lohr]

element.remove() is a fairly recent addition to the DOM. Before that, we used parentNode.removeChild(element).

[David Dal Busco]

I also always use removeChild so far.

const elem = document.getElementById('custom_id');
elem.parentElement.removeChild(elem);

Cool to know it will be possible in the future without referencing the parent, thanks for the post Chris 👍

[Chris Bongers]

Pretty nice addition, right?

[David Dal Busco]

Indeed, pretty cool 👍

[Chris Bongers]

Yeah such a welcome addition 🤩