jQuery – Remove Element

Back to my old hobby, I’m going to show you how to remove / delete an HTML element via jQuery. (I now came back to write what I’ve encountered along the way with my work, especially in web development).

Assuming you have a web application that have an Add, Edit and Delete functionality (using AJAX). And when you click the Delete button, a certain element or group of element will be removed / deleted. Ex:

In my example, it has this outline:

<div class="row" id="row_1"> 
    <!-- contents here --> 
    <input type="button" name="btn-del_0" id="btn-del_0" value="&nbsp;" /> 
</div> 
<div class="row" id="row_1"> 
    <!-- contents here for the second row --> 
    <input type="button" name="btn-del_1" id="btn-del_1" value="&nbsp;" /> 
</div> 
<div class="row" id="row_2"> 
    <!-- so on and so forth --> 
    <input type="button" name="btn-del_2" id="btn-del_2" value="&nbsp;" /> 
</div> 

Now, if the user clicks the delete button, we must know which row is clicked and then get the div id. As you’ve noticed, each delete button is suffixed with a number, ex: btn-del-0, which means it is the button under div#row_0.

We will bind the click event of the button to our function.

$("input[id^='btn-del']").click(function(e){ 
    //our next code will be here
});

The selector ^= means that it will bind to all input whose id starts with “btn-del”. Next, we are going to get the current row number which is the suffix of our button’s id. I have made a handy function to get the base name and index of a certain element when these conditions are followed:

• All IDs are suffixed with a number, and used underscore ( _ ) ex:
  btn-del_0, btn-del_1, btn-del_2, therefore the base name is btn-del and the indexes are the numbers. Underscore is the indicator that the next character is an index.
• Of course they must have the same base name

So we have this function which returns an object example: result.base is the base name and result.index is the index.

function getBaseElement(elem)
{
	elem = elem + ""; 
	var len 		= elem.length;
	var lPos 		= elem.lastIndexOf("_") * 1;
	var baseElem 	= elem.substr(0, lPos);
	var index		= elem.substr(lPos+1, len);
	
	if (checkNumeric(index))
	{
		return {"base": baseElem, "index": index}; 
	}
	else
	{
		return {"base": null, "index": null}; 
	}
}

function checkNumeric(value)
{
	var anum = /(^\d+$)|(^\d+\.\d+$)/
	if (anum.test(value))
		return true;
	return false;
}

Now that we have these functions, we are ready to do our main objective: To delete the selected row when the delete button is clicked. Here is the final code:

$(document).ready( function() {
	$("input[id^='btn-del']").click(function(e){
		var elem = getBaseElement(this.id);
		
		if (confirm("Are you sure you want to delete this?"))
		{
			$("#row-" + elem.index).remove();
		}
	});
});

function getBaseElement(elem)
{
	elem = elem + ""; 
	var len 		= elem.length;
	var lPos 		= elem.lastIndexOf("_") * 1; 
	var baseElem 	= elem.substr(0, lPos);
	var index		= elem.substr(lPos+1, len);
	
	if (checkNumeric(index))
	{
		return {"base": baseElem, "index": index}; 
	}
	else
	{
		return {"base": null, "index": null}; 
	}
}

function checkNumeric(value)
{
	var anum = /(^\d+$)|(^\d+\.\d+$)/
	if (anum.test(value))
		return true;
	return false;
}

Code Explanation

We bind the click event of delete button to a function in jQuery. This binding happens when the document is ready $(document).ready().

Then since we are binding many buttons, we need to get what row is that button for?

Then we ask the user if he/she really wants to delete it.

Next we remove the row. $(“#id-of-the-element”).remove();

That is just how it was simple in jQuery.