Grow your CSS skills. Land your dream job.

Last updated on:

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. 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. ffffdessscn
    Permalink to comment#

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

    • 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);
      

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".