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.

Here is the HTML code:

1
2

<div id="removeMe" style="background-color: #333333; color: #FFFFFF; padding: 10px;">Remove me by clicking the button below.</div>
<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
2
3

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

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.

Here is the HTML and CSS code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<style type="text/css">
.blueBox {
   height: 100px; 
   width: 100px; 
   background-color: blue; 
   color: white;
   margin: 10px; 
   padding; 5px;
   float: left;
}
.redBox {
   height: 100px; 
   width: 100px; 
   background-color: red; 
   color: white;
   margin: 10px; 
   padding; 5px;
   float: left;
}
</style>
<div class="blueBox">Blue box #1</div>
<div class="blueBox">Blue box #2</div>
<div class="blueBox">Blue box #3</div>
<div class="redBox">Red box #1</div>
<div class="redBox">Red box #2</div>
<div class="redBox">Red box #3</div>
<div style="clear: both;"></div>
<button onclick="removeByClass('blueBox');">Remove just the blue boxes</button>
<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
2
3

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

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!

• Tweet
• Pin It