Remove an Element

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.

    • Benjamin
      Permalink to comment#

      Hey Ren, you may get better luck posting this question to the forums since there is a larger group of people available to help there.

      Best of luck!

  4. ytfdhfg
    Permalink to comment#


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 triple backtick fences like this:

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

We have a pretty good* newsletter.