www.webdeveloper.com
Results 1 to 4 of 4

Thread: remove created item from DOM - beginner student

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Posts
    28

    remove created item from DOM - beginner student

    Hello I'm taking an intro javascript class an one of the last assignments is to write a web application to add items to a list using a form text input and button, and allow the user to delete an item from the list by clicking on it.

    The code i currently have is working, but it only deletes the last item. I need to delete the specific item being clicked.

    Please help

    <!doctype html>
    <html lang="en">
    <head>
    <title> Add and delete items Objective </title>
    <meta charset="utf-8">
    <style>
    p {
    font-style: italic;
    }
    li:hover {
    cursor: pointer;
    }

    </style>
    <script>
    /* create constructor to display the properties, in this case there's only one */
    function Item(item) {
    this.item = item;

    /*this will print it into the page */
    this.print = function(name) {
    var s = "Item: " + this.item;
    return s;
    }
    }

    /* empty array where the items will be saved and displayed into the page */
    var itemList = [];

    window.onload = init;

    function init() {
    var submitButton = document.getElementById("submitButton");
    submitButton.onclick = getItemData;

    // add click handler for element created in javascript
    var itemList = document.getElementById("itemList");
    itemList.onclick = deleteItem;

    }

    /* form collection for the item
    */

    function getItemData() {
    var itemInput = document.getElementById("item");
    var item = itemInput.value;


    if (item == null || item == "") {
    alert("Please enter an item.");
    return;
    }

    /* if something is entered then it is pushed and saved into the itemList */
    else {
    var items = new Item(item);
    itemList.push(items);
    addItemToList(items);
    }
    }

    /* this creates the new elements and displays them into the page once they are
    saved into the itemList */
    function addItemToList(items) {
    var itemList = document.getElementById("itemList");
    var li = document.createElement("li");
    li.innerHTML = items.print();
    itemList.appendChild(li);
    }

    /* this deletes the items from the page. however, it only removes the last item on the list */
    function deleteItem() {
    var oldItem = document.querySelector("li");
    if (oldItem) {
    var oldItemParent = oldItem.parentElement;
    oldItemParent.removeChild(oldItem);
    }
    }
    </script>
    </head>
    <body>
    <form>
    <label for="item">Add an item: </label>
    <input id="item" type="text" size="20"><br>
    <input id="submitButton" type="button" value="Add!">
    </form>
    <ul id="itemList">
    </ul>
    <p>
    Click an item to remove it from the list.
    </p>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    A simple way of doing it:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Add and delete items Objective</title>
    
    		<script type="text/javascript">
    
    			function addItem()
    			{
    				var e = document.createElement('li');
    				e.innerHTML    = 'Item: ' + document.getElementById('item').value;
    				e.onclick      = function() {e.parentNode.removeChild(e);};
    				e.style.cursor = 'pointer';
    				document.getElementById('itemList').appendChild(e);
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<label for="item">Add an item: </label><input id="item" type="text" size="20" />
    		<br />
    		<input type="button" value="Add!" onclick="addItem();" />
    		<ul id="itemList">
    		</ul>
    		<p>Click an item to remove it from the list.</p>
    
    	</body>
    </html>
    Last edited by bionoid; 08-03-2012 at 05:35 PM.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Jul 2012
    Posts
    28
    thanks for the tip!

    but is there any way to use the onclick on the deleteItem function to delete the specific item you click on?

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Add and delete items Objective</title>
    
    		<script type="text/javascript">
    
    			function deleteItem(element)
    			{
    				element.parentNode.removeChild(element);
    			}
    
    			function addItem()
    			{
    				var e = document.createElement('li');
    				e.innerHTML    = 'Item: ' + document.getElementById('item').value;
    				e.onclick      = function() {deleteItem(e);};
    				e.style.cursor = 'pointer';
    				document.getElementById('itemList').appendChild(e);
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<label for="item">Add an item: </label><input id="item" type="text" size="20" />
    		<br />
    		<input type="button" value="Add!" onclick="addItem();" />
    		<ul id="itemList">
    		</ul>
    		<p>Click an item to remove it from the list.</p>
    
    	</body>
    </html>
    JavaScript: Learn | Validate | Compact | bionoid

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles