Previous Page
Next Page

Deleting Nodes

If you want to add content to your page, you're also likely to want to delete content from your page. Scripts 12.3 and 12.4 delete the last paragraph on the page, as shown in Figure 12.3.

Figure 12.3. The last paragraph on this page needed a little revision (left), so it's good that it can be deleted using the "Delete last paragraph" link (right).

[View full size image]


To delete nodes:

1. 
var allGrafs = document. getElementsBy TagName("p");



This line uses the getElementsByTagName method to collect all the paragraph tags in our page and store them in the allGrafs array.

2. 
if (allGrafs.length > 1) {



Before doing anything we regret, we have to check first that the allGrafs array has a length greater than 1. We don't want to try to delete something that doesn't exist, and the length will always be at least 1 (as Script 12.3's textarea form field is inside a <p> tag).

Script 12.3. This script adds a link, rather than a button, to delete a text node.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Deleting Nodes</title>
     <script type="text/javascript" language="Javascript" src="script02.js">
     </script>
</head>
<body>
<form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <input type="submit" value="Add some text to the page" />
</form>
<a id="deleteNode" href="#">Delete last paragraph</a>
</body>
</html>

3. 
var lastGraf = allGrafs.item (allGrafs.length-1);



If there are paragraphs, get the last 1 on the page by subtracting one from length and using that as our index array. Remember that length is one-relative while arrays are zero-relative, so subtracting 1 from length gives us the last paragraph on the page.

4. 
var docBody = document. getElementsBy TagName("body")[0];
docBody.removeChild(lastGraf);



Just like the last task, in order to modify the document we need to get the contents of the body. Once we've got that, it's simply a matter of calling the docBody.removeChild() method and passing it lastGraf, which tells JavaScript which paragraph we want to delete. Our page should immediately show one less paragraph.

Tip

  • Once again, remember that you can delete element nodes other than paragraphs. To do this, you need to change the script so that getElementsByTagName() is passed something other than a p.


Script 12.4. Now the user can both add and delete text.

window.onload = initAll;

function initAll() {
     document.getElementsByTagName("form")[0]. onsubmit = function() {return addNode();}
     document.getElementById("deleteNode"). onclick = delNode;
}

function addNode() {
     var inText = document.getElementById ("textArea").value;
     var newText = document.createTextNode (inText);

     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);

     var docBody = document.getElementsByTagName ("body")[0];
     docBody.appendChild(newGraf);

     return false;
}

function delNode() {
     var allGrafs = document.getElements ByTagName("p");

     if (allGrafs.length > 1) {
        var lastGraf = allGrafs.item (allGrafs.length-1);
        var docBody = document.getElements ByTagName("body")[0];
        docBody.removeChild(lastGraf);

     }
     else {
        alert("Nothing to remove!");
     }

     return false;
}


Previous Page
Next Page