1/24/11

Working with DOM , nodes and Objects (part 2) : Deleting Nodes

As my last post of DOM was on Adding nodes here is a post that will help you in deleting the last entered node. ie DELETING Nodes.



*----------------------*----------------------*---------------------*


HTML CODE:


<html>
<head>
    <title>Deleting Nodes</title>
    <script type="text/javascript" src="script.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> 
 
The Above is the HTML code. After this the javascript code is there that will help you in detecting whether any nodes is present for deletion or not.

*----------------------*----------------------*---------------------*

script.js:


window.onload = initAll;

function initAll() {
    document.getElementsByTagName("form")[0].onsubmit = 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.getElementsByTagName("p");
    
    if (allGrafs.length > 1) {
        var lastGraf = allGrafs.item(allGrafs.length-1);
        var docBody = document.getElementsByTagName("body")[0];
        var removed = docBody.removeChild(lastGraf);
    }
    else {
        alert("Nothing to remove!");
    }

    return false;
} 
 
After u have entered the Code it will look like this:

Before Deletion
After Deleting I


When Nothing to remove, It gives an ALERT......

SHARE THIS POST:

Related Posts:

  • Detecting a Cookie Here is a piece of code that can help people detect cookies. Cookies play an important part in the website. *****************#####***************** JS Code: window.onload = showCookies; function showCookies() {  &nb… Read More
  • Working with DOM , nodes and Objects (part 2) : Deleting Nodes As my last post of DOM was on Adding nodes here is a post that will help you in deleting the last entered node. ie DELETING Nodes. *----------------------*----------------------*---------------------* HTML CODE: … Read More
  • Javascript Smarter Links Here is a piece of code which when you use will make your link in the website SMARTER. This piece of code i used it during my internship and it was well appreciated by the company as it made the user know that the content… Read More
  • Handling Keyboard Events in Javascript Guys if u have seen the moving of pictures on pressing a key in FB , FLICKR etc. Can also be done by you all now. The code for Handling the keyboard button press etc is shown below **********************##**************… Read More
  • Working with DOM,nodes and Objects : Inserting Nodes (part 3) This Post is a continuation of my previous posts ie Adding Nodes and Deleting Nodes. IN this post i am tell how you can add nodes between any two nodes. *----------------------*----------------------*----------------… Read More