Chapter 12: Objects and the DOM

Deleting Specific Nodes

See it run: Deleting Specific Nodes

Script 12.5

This HTML adds radio buttons, which offers your visitors the choice of adding or deleting text.

Script 12.6

This JavaScript 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);
}

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

return false;
}

Contents:

Deleting Specific Nodes

Script 12.5

Script 12.6