mr_mars2011 Posted September 24, 2011 Share Posted September 24, 2011 I am creating a little to do list just for some practice. But I am having trouble deleting nodes I have created. Here is my code so far: <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title></title></head><body> <h1>To do list</h1> <ul id="toDoList"> </ul> <form id="toDOForm"> <label for="listItem">Add something to do: </label> <input type="text" id="listItem" name="listItem"> <input type="button" value="Add to list" id="addToList"> </form> <script> var button = document.getElementById('addToList'), txtBox = document.getElementById('listItem'), toDoList = document.getElementById('toDoList'), li, t, frag; function addItem(){ if(txtBox.value===""){ alert('Please enter a value'); } else{ li = document.createElement('li'); t = document.createTextNode(txtBox.value); frag = document.createDocumentFragment(); li.appendChild(t); frag.appendChild(li); toDoList.appendChild(frag); } } function deleteItem(){ alert('test function is being executed'); this.parentNode.removeChild(this); } if(document.addEventListener){ button.addEventListener('click', addItem, false); if(li){ li.addEventListener('click', deleteItem, false); } } </script></body></html> I can create nodes easily, if you enter some text in the text box and click the button you can add a todo item easily. Trouble is I want to be able to delete one when I click on it. But the deleteItem() function is never called. Obviously the addEventListener() only works in modern browsers but it's just a little example I'm working on so I not bothering to create cross browser compatiblity. Any help would be much appreciated. Link to comment Share on other sites More sharing options...
Ingolme Posted September 24, 2011 Share Posted September 24, 2011 When your code reaches this point, li doesn't have any value: if(li){ li.addEventListener('click', deleteItem, false);} Link to comment Share on other sites More sharing options...
mr_mars2011 Posted September 25, 2011 Author Share Posted September 25, 2011 Finally got this working with a for loop. In case anyone's interested here's the code. <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title></title></head><body> <h1>To do list</h1> <ul id="toDoList"> </ul> <form id="toDOForm"> <label for="listItem">Add something to do: </label> <input type="text" id="listItem" name="listItem"> <input type="button" value="Add to list" id="addToList"> </form> <script> (function(){ var button = document.getElementById('addToList'), txtBox = document.getElementById('listItem'), toDoList = document.getElementById('toDoList'), li, t,pp, frag, listItem = document.getElementsByTagName('li'); function addItem(){ if(txtBox.value===""){ alert('Please enter a value'); } else{ li = document.createElement('li'); t = document.createTextNode(txtBox.value); frag = document.createDocumentFragment(); li.appendChild(t); frag.appendChild(li); toDoList.appendChild(frag); if(document.addEventListener){ if(listItem && listItem.length){ var len = listItem.length; for ( var i = 0; i < len; i++ ) { listItem[i].addEventListener('click', deleteItem, false); } } } } } function deleteItem(){ var deleteItem = confirm('Delete Item'); if (deleteItem){ this.parentNode.removeChild(this); } } if(document.addEventListener){ button.addEventListener('click', addItem, false); } }()); </script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.