The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Remove an Element

Last updated on:

For whatever reason, an element can't destroy itself in JavaScript. jQuery has a method for this, which is nice because this is how we think:


But there is no direct equivalent in JavaScript. Instead you'll need to select the parent element and use removeChild.

So if you have:

<div class="module">
  <div class="remove-me">...</div>

You'll need to do:

var thingToRemove = document.querySelectorAll(".remove-me")[0];


Or if you had a reference to an element and wanted to empty out all the elements inside it, but keep it:

mydiv = document.getElementById('empty-me');
while (mydiv.firstChild) {


  1. Andy Hoffman
    Permalink to comment#

    How about using a facade pattern for this task?

    function myWrapper(element) {
      this.element = element;
    myWrapper.prototype.remove = function() {
    var some_el = new myWrapper(
  2. ffffdessscn
    Permalink to comment#

    Nice but to difficult for most html, css and jquery people.

    • Chris Coyier
      Permalink to comment#

      Nah you’ll be OK.

      Think of it like this:

      // jQuery: thingToRemove = $(".remove-me");
      var thingToRemove = document.querySelectorAll(".remove-me")[0];
      // jQuery: thingToRemove.remove();
  3. Ren Lyke
    Permalink to comment#


    I am trying to hide a class in a page when a particular class is in that page. Other wise the class should reflect.

    When the class “gsg-nav” is present i wish to hide this class “article-sidebar side-column”.

    How could i do that.

    Below is the link for my code.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed