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:

$(".remove-me").remove();

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">
  <p>Stuff.</p>
  <div class="remove-me">...</div>
</div>

You'll need to do:

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

thingToRemove.parentNode.removeChild(thingToRemove);

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) {
  mydiv.removeChild(mydiv.firstChild);
}

Comments

  1. User Avatar
    Andy Hoffman
    Permalink to comment#

    How about using a facade pattern for this task?

    function myWrapper(element) {
      this.element = element;
    }
    
    myWrapper.prototype.remove = function() {
      this.element.parentNode.removeChild(this.element);
    }
    
    var some_el = new myWrapper(
      document.getElementById("some_el)
    );
    
    some_el.remove();
    
  2. User Avatar
    ffffdessscn
    Permalink to comment#

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

    • User Avatar
      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();
      thingToRemove.parentNode.removeChild(thingToRemove);
      
  3. User Avatar
    Ren Lyke
    Permalink to comment#

    Hi,

    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.

    • User Avatar
      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. User Avatar
    ytfdhfg
    Permalink to comment#

    fghfhfh

  5. User Avatar
    Amit Mishra
    Permalink to comment#

    Hello Guy’s ,

    anyone can help me on a things , I have in a page once <nav class='test'> and below a <div> without any class/id, I want to hide/remove <div> element which is in next of <nav> tag , I can do $('.test').next().remove(); but strictly jQuery is not allowed , please give me any trick of JavaScript or CSS, Please note that , i haven’t access to edit any html code only i can add js/css.

    • User Avatar
      Andy Hoffman
      Permalink to comment#

      Amit,

      I am having trouble embedding code in here, but I put together a quick example which seems to do what you want. demo

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag