Previous Page
Next Page

Deleting Specific Nodes

While always deleting the last paragraph might be interesting, you'll sometimes want to delete something that's not at the end of the page. Scripts 12.5 and 12.6 make our code considerably more flexible, allowing the user to decide which paragraph is history, as shown in Figures 12.4 and 12.5.

Script 12.5. Radio buttons let you offer your visitors the choice of adding or deleting text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Deleting Selected Nodes</title>
     <script type="text/javascript" language="Javascript" src="script03.js">
     </script>
</head>
<body>
<form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <p><label><input type="radio" name="nodeAction" />Add node</label>
     <label><input type="radio" name="nodeAction" />Delete node</label></p>
     Paragraph #: <select id="grafCount"> </select>
     <input type="submit" value="Submit" />
</form>
<div id="modifiable"> </div>
</body>
</html>

Script 12.6. This script allows users to choose which paragraph they want to delete.

window.onload = initAll;
var nodeChangingArea;

function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = function() {return nodeChanger();}

     nodeChangingArea = document.getElementById("modifiable");
}

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

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

     nodeChangingArea.appendChild(newGraf);
}

function delNode() {
     var delChoice = document.getElementById("grafCount").selectedIndex;
     var allGrafs = nodeChangingArea.getElementsByTagName("p");
     var killGraf = allGrafs.item(delChoice);

     nodeChangingArea.removeChild(killGraf);
}

function nodeChanger() {
     var actionType = -1;
     var currentPgraphCount = nodeChangingArea.getElementsByTagName("p").length;
     var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;

     for (var i=0; i<radioButtonSet.length; i++) {
        if (radioButtonSet[i].checked) {
           actionType = i;
        }
     }

     switch(actionType) {
        case 0:

           addNode();
           break;

        case 1:
           if (currentPgraphCount > 0) {
              delNode();
              break;
           }
        default:
            alert("No valid action was chosen");
     }

     document.getElementById("grafCount"). options.length = 0;

     for (i=0; i<nodeChangingArea.getElements ByTagName("p").length; i++) {
       document.getElementById("grafCount"). options[i] = new Option(i+1);
     }

     return false;
}

Figure 12.4. After adding nodes, the Paragraph # pop-up menu contains a list of paragraph numbers.


Figure 12.5. First, you click the Delete node radio button, and then you choose a paragraph to delete from the pop-up menu (top). Clicking the Submit button wipes out the selected paragraph (the Mark Twain quote) and moves up the following paragraph (bottom).


To delete a particular node:

1. 
nodeChangingArea = document. getElementById("modifiable");



As our HTML page now has multiple paragraphs, it could be confusing to keep track of which can and can't be deleted. Instead, we now set up an entirely new area: a div with the id of modifiable. Here, we set the global variable nodeChangingArea to that element node.

2. 
var delChoice = document. getElementById("grafCount"). selectedIndex;
var allGrafs = nodeChangingArea. getElementsByTagName("p");
var killGraf = allGrafs.item (delChoice);



When the user chose to delete a paragraph, they also had to pick which paragraph to delete. We read that number from the grafCount field and store it in delChoice. The allGrafs variable is then set to be all the paragraphs within nodeChangingArea, and the paragraph to be deleted is then stored in killGraf.

3. 
nodeChangingArea.removeChild (killGraf);



This step is just like that in the previous task, except that when it's run we'll see paragraphs disappear from the middle of our page.

Tips

  • Having trouble figuring out some of the other code? The nodeChanger() function combines (in order of appearance) functionality from Scripts 7.12, 3.12, and 7.4. It's very common in programming to have a library of simple routines, which, when put together, can create a single, much more complex whole.

  • Note that in the code above we're using nodeChangingArea where we previously used docBodywhen you're working with nodes, it's straightforward to swap out code that works with one element node for another. Here, we're looking at just one part of the page instead of the whole, but the overall way to accomplish our task is identical.

  • Instead of declaring nodeChangingArea as a global variable and initializing it in initAll(), we could have created and initialized it locally inside every function in which it's used. Each choice has its pros and cons; here, we went with the global so that we didn't have to initialize it over and over again.



Previous Page
Next Page