How to dynamically remove elements from the DOM via jQuery


jQuery is an awesome JavaScript library that can do some very heavy lifting in very small amounts of code. Take the example below where we are simply removing a div element from the DOM.

Demo
Remove me by clicking the button below.



Here is the HTML code:

  1. <div id="removeMe" style="background-color: #333333; color: #FFFFFF; padding: 10px;">Remove me by clicking the button below.</div>
    
  2. <button onclick="removeDiv('removeMe');">Remove</button>

Line 1 defines the div element with id=removeMe that we are planning to vanquish from the DOM. There is some inline CSS thrown in for aesthetics and I apologize for that. It just makes the div easier to visualize.

Line 2 is our button where the onclick event calls the removeDiv JavaScript function. In addition, the id of the div is passed over as an argument to the function.

Simple enough. Now to the more exciting stuff.

Here is the JavaScript code:

  1. function removeDiv(divId) {
  2.    $("#"+divId).remove();
  3. }

That’s it and that is why I <3 jQuery =) Let's break down line 2 because there is actually quite a bit that is going on here with 22 characters. $(“#”+divId) is jQuery syntax which uses the ID selector to help us select our div. The divId parameter is appended to the ID selector so that the function is dynamic and can handle any div or element in the DOM. When a user clicks the button, the removeMe argument is passed over so the selector becomes $("#removeMe") after the variable is interpolated.

Ok, so now we have selected our div element, we want to remove it from the DOM. This is where the .remove() jQuery function comes in handy. Simply append this function to the selected element and the rest is history.

Oh but the fun does not stop here. With the use of the all-mighty jQuery selector, we can easily remove multiple elements at once. Looky here.

Demo
Blue box #1
Blue box #2
Blue box #3
Red box #1
Red box #2
Red box #3



Here is the HTML and CSS code:

  1. <style type="text/css">
    
  2. .blueBox {
    
  3.    height: 100px; 
    
  4.    width: 100px; 
    
  5.    background-color: blue; 
    
  6.    color: white;
    
  7.    margin: 10px; 
    
  8.    padding; 5px;
    
  9.    float: left;
    
  10. }
    
  11. .redBox {
    
  12.    height: 100px; 
    
  13.    width: 100px; 
    
  14.    background-color: red; 
    
  15.    color: white;
    
  16.    margin: 10px; 
    
  17.    padding; 5px;
    
  18.    float: left;
    
  19. }
    
  20. </style>
    
  21. <div class="blueBox">Blue box #1</div>
    
  22. <div class="blueBox">Blue box #2</div>
    
  23. <div class="blueBox">Blue box #3</div>
    
  24. <div class="redBox">Red box #1</div>
    
  25. <div class="redBox">Red box #2</div>
    
  26. <div class="redBox">Red box #3</div>
    
  27. <div style="clear: both;"></div>
    
  28. <button onclick="removeByClass('blueBox');">Remove just the blue boxes</button>
    
  29. <button onclick="removeByClass('redBox');">Remove just the red boxes</button>

The CSS is nicely separated from our code which is best practice (and easier to maintain). The HTML code defines 3 blue boxes with the class attribute blueBox and 3 red boxes with the class attribute redBox. We also have one button to remove the blue boxes by calling the removeByClass function and passing over the blueBox class name. Then we have another button that calls the same function but passes the redBox class name.

Now for the JavaScript code:

  1. function removeByClass(className) {
  2.    $("."+className).remove();
  3. }

That’s right. It’s almost identical as our original function except we now use . instead of # which is the jQuery class selector. Did I mention how much I love jQuery?

This time, we simply plug in the class name to our class selector which selects ALL elements with that particular class name. Then we append the .remove() function as before and all elements that are selected will be removed. Pretty sweet eh? =)

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!





Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

5 thoughts on “How to dynamically remove elements from the DOM via jQuery”

  1. Hi Allen ,
    Help!
    I’m so “out-of-time” its a joke.
    I have spent 3 days reading up “how-to” articles, on what should be one of the most common js requests around, and yup… nudda!

    Or “nudda” for persons who don’t have time to learn js in a day, and need a copy and paste fix.

    Your articles look like you know a thing or two to help a person out…

    I am trying to finish off a HTML booking form I’ve made ‘myself’. I have reached the point in the form where I’ve put in the dates, and the person/s have to choose a date in the next 6 months, and that date must simply populate the text field lower on the page, that will be sent off , so the booking can be created.

    I have tried form.elements and document.elements and radio’s and checkbox’s.

    If I send you a shortened version of the form can you help me with the if-then-else loop.
    And then reset, clear it all up neat-and-tidy after part.

    Please please please.
    Bev

    1. Hi Bev,

      Can you give me a link to the page? I think I understand what you’re looking for but I need to see the actual page to help.

      Allen

      1. Hi Allen.
        You are an angel among men.
        http://pasteltrainer.co.za/trainingbookingevenings.shtml

        At this point I’m setting up this page to accept 4 people max (That can be booked together by one person/company).

        And then, when it was working correctly… as I don’t know how to loop anything, I was going to create 4 separate booking pages.

        For 1 person/2 people/3 people/4 people.

        Yes, don’t laugh— I’m crying as I’m reading this back to myself, it sounds so bad–

        But I don’t know how to make 1 long form, so its going the long route.

        Then this has to go to a shopping cart button.
        Which is another huge issue as they are talking encryption with the post button. And I havn’t done any validation on this form either.

        But here you go. If you can help me, I will be forever grateful, and buy your 6 pack.

        Bev

        1. Hi Bev,

          This is quite bigger than I expected, but I did create a demo which helps with creating the forms dynamically (up to 4) so you don’t need to create separate booking pages. Each input of each form has a unique value for the name attribute so you should get all the data when the user presses the submit button.

          https://jsfiddle.net/axl163/rLa8xoqq/

          I hope this sets you on the right path.

          Allen

Leave a Reply

Your email address will not be published. Required fields are marked *