Ecommerce Developer
 
 

Code

Deleting DOM Elements with JavaScript

By Armando Roggio on June 25, 2010 · with 0 Comments

 

shows a delete key from a keyboard to imply the topic of the article. For a number of reasons—including user input, user authentication, or access control—a developer may wish to delete or remove elements from the document object model (DOM) as a particular page is rendered. JavaScript makes the task both quick and easy.

In fact, JavaScript, and some JavaScript libraries, offer several ways to remove elements. In this post, I will explore a couple of options, which should help you develop your own methods.

remove() Method

The first approach to removing DOM elements that I'll demonstrate, the remove() method, seems like it should be the most broad, but it actually applies only in limited situations like when the HTML <select> tag is in use. For the purposes of this example, I have written some basic HTML that produces a list of search engines.

<!doctype html>
<html lang="en">
<head>
	<title>Delete/Remove Dom Elements with JavaScript</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
	<div id="wrapper">	
		<h2>Delete/Remove Dom Elements with JavaScript</h2>

		<select id="selection">
		<option value="1">Google</option>
		<option value="2">Bing</option>
		<option value="3">Viewzi</option>
		<option value="4">Yahoo</option>
		<option value="5">Ask</option>
		</select>

	</div><!--end wrapper-->
	<script src="js.js"></script>
</body>
</html>

The initial HTML document captured in Google Chrome.

To remove a particular list item, I wrote a short function that first identifies the <select> tag and then uses the remove() method to delete the desired list item. In the example, I will delete Viewzi.

function removeA()
{
	var sel = document.getElementById("selection");
	sel.remove(2);
}

removeA();

Viewzi has been dynamically deleted from the possible selections.

removeChild()

A second and broader approach to eliminating DOM elements uses removeChild(). This method can be applied to any element on the page, but does require you to "walk" up and down the DOM.

For this example, I wrote a short bit of HTML that includes a header and three links.

<!doctype html>
<html lang="en">
<head>
	<title>Delete/Remove Dom Elements with JavaScript</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
	<div id="wrapper">	
		<h2>Delete/Remove Dom Elements with JavaScript</h2>
		
		<a href="#" id="one">Link One</a>
		<a href="#" id="two">Link Two</a>
		<a href="#" id="Three">Link Three</a>
		
	</div><!--end wrapper-->
	<script src="js.js"></script>
</body>
</html>

I also wrote two lines of style descriptions to make the HTML more readable. 

#wrapper {margin: 4em auto; width: 60%;}
#wrapper a {padding: 0 1em 0 0;}

The initial HTML is shown in Microsoft Internet Explorer 8.

To remove one of the links, I need a function that identifies that link and that link's parent node. Once these elements are identified, the function will use removeChild() to delete the link.

function removeA()
{
	var parentEl = document.getElementById('wrapper');
	var cutItem = document.getElementById('two');
	parentEl.removeChild(cutItem);
}

removeA();

The removeChild() method has deleted the second link.

You may also use removeChild() to eliminate elements by index. For example, the second link, which I removed above, happens to have an index of "5" in the array of child nodes for the "wrapper" div. 

function removeA()
{
	var parentEl = document.getElementById('wrapper');
	parentEl.removeChild(parentEl.childNodes[5]);
}

removeA();

It is also possible to remove all of the child nodes at once. This example is based on one that Mozilla has proposed. It uses a while statement to keep eliminating elements until there is none left.

function removeA()
{
	var parentEl = document.getElementById('wrapper');
	while (parentEl.firstChild) {
		parentEl.removeChild(parentEl.firstChild);
	}
}

removeA();

Using jQuery's remove()

Several JavaScript libraries also provide solutions for removing DOM elements. For jQuery, this effectively amounts to an extension of the remove() method so that it works with any element not just those associated with the <select> tag. To use this solution, I will need to add a reference for the jQuery library to my HTML. In this case, I will be using the Google content delivery network (CDN). 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

The initial HTML is show in Mozilla Firefox.

Because I can rely on the jQuery library, removing the element takes very little effort.

function removeA()
{
	$('#three').remove();
}

removeA();

The jQuery-flavored JavaScript removed the third link.

I could have removed all of the links just as easily.

function removeA() { $('a').remove(); }

removeA();

All of the links were deleted at once.

Using Prototype

The popular Prototype JavaScript library, which Magento includes with its platform, also extends the remove() method to include just about any element you can imagine. I will, of course, need to get the Prototype JavaScript file via the Google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

Implementing it is very similar to using jQuery.

$('one').remove();

The first link is not longer rendered. This example is shown in Safari.

BBC's Glow Destroys Elements

The BBC's JavaScript library, Glow, uses the method destroy() to delete page elements, completely removing them from memory. This library also has a remove() method that can effectively eliminate elements with a bit less finality. Both are implemented in the same way, so for the examples below, I used destroy().

I am not aware of a CDN for Glow, so I downloaded version 1.7.3 and added it to my local file folder.

<script src="/glow/1.7.3/core/core.js"></script>

For this example, I decided to delete the header.

glow.dom.get('h2').destroy();

Glow's destroy() method has removed the header. This example is shown in Firefox.

Using Glow, I could have just as easily removed one or all of the links.

glow.dom.get('#two').destroy();

Summing Up

When it is necessary to dynamically remove elements from the DOM, JavaScript and various JavaScript libraries offer a lot of solutions. But there are, of course, many ways to get the job done, and I would love to learn how you approach the problem of removing or deleting DOM elements, so please tell me what you think in the comments below.

Resources

Related Articles

0 Comments

Rss-sm