Удаление добавленных элементов в DOM дереве
Добрый день! Не могу решить проблему с удалением добавленных элементов, элементы, которые заданы удаляются, а новые нет. Помогите, пожалуйста.
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Home Work</title> <style> table, td { border: 3px solid black; } td { width:300px; height: 500px; } table { border-collapse: collapse; position: absolute; top: 50%; left: 50%; margin-left: -303px; margin-top: -252px; } form[name="addElement"] { text-align: center; margin-top: -120px; } form[name="listElements"] { margin-left: 100px; margin-top: -250px; position: absolute; } p#text, form[name="listElements"] { font-size: 18px; } </style> <script> window.onload = function () { var addElement = document.forms.addElement; var listElements = document.forms.listElements; var main = document.getElementById("main"); addElement.createElement.onclick = function () { var newElement = addElement.elements["newElement"].value; var newInput = document.createElement("input"); var newSpan = document.createElement("span"); var newP = document.createElement("p"); newInput.type = "checkbox"; var t = document.createTextNode(newElement); newSpan.appendChild(t); main.appendChild(newP); newP.appendChild(newInput); newP.appendChild(newSpan); } var inputs = document.getElementsByTagName("input"); var spans = document.getElementsByTagName("span"); for (var i = 0; i < listElements.length; i++) { listElements.elements[i].onclick = function () { for (var j = 0; j < listElements.length; j++) { if ((listElements.elements[j].checked) && (listElements.length > 1)) { inputs[j].parentNode.removeChild(inputs[j]); spans[j].parentNode.removeChild(spans[j]); } else if (listElements.length == 1) alert("Последний элемент не удаляется !!!"); } } } } </script> </head> <body> <table> <tr> <td> <form name="listElements" id="main"> <p>Перечень позиций</p> <p> <input type="checkbox" /><span>элемент 1</span> </p> <p> <input type="checkbox" /><span>элемент 2</span> </p> <p> <input type="checkbox" /><span>элемент 3</span> </p> <p> <input type="checkbox" /><span>элемент 4</span> </p> </form> </td> <td> <form name="addElement"> <p id="text">Новая позиция</p> <p> <input type="text" name="newElement" /> </p> <input type="button" name="createElement" value="добавить" /> </form> </td> <tr> </table> </body> </html> |
scrapmetal,
назначье клик либо вновь созданному элементу - либо изначально ставьте клик только на форму Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<!DOCTYPE HTML>
<html> <head> <meta charset="UTF-8"> <title>Home Work</title> <style> table, td { border: 3px solid black; } td { width:300px; height: 500px; } table { border-collapse: collapse; position: absolute; top: 50%; left: 50%; margin-left: -303px; margin-top: -252px; } form[name="addElement"] { text-align: center; margin-top: -120px; } form[name="listElements"] { margin-left: 100px; margin-top: -250px; position: absolute; } p#text, form[name="listElements"] { font-size: 18px; } </style> <script> window.onload = function () { var addElement = document.forms.addElement; var listElements = document.forms.listElements; var main = document.getElementById("main"); addElement.createElement.onclick = function () { var newElement = addElement.elements["newElement"].value; var newInput = document.createElement("input"); var newSpan = document.createElement("span"); var newP = document.createElement("p"); newInput.type = "checkbox"; var t = document.createTextNode(newElement); newSpan.appendChild(t); main.appendChild(newP); newP.appendChild(newInput); newP.appendChild(newSpan); } var inputs = document.getElementsByTagName("input"); var spans = document.getElementsByTagName("span"); var ps = document.getElementsByTagName("p"); for (var i = 0; i < listElements.length; i++) { listElements.elements[i].onclick = function () { for (var j = 0; j < listElements.length; j++) { if ((listElements.elements[j].checked) && (listElements.length > 1)) { inputs[j].parentNode.removeChild(inputs[j]); spans[j].parentNode.removeChild(spans[j]); } else if (listElements.length == 1) alert("Последний элемент не удаляется !!!"); } } } } </script> <body> <table> <tr> <td> <form name="listElements" id="main"> <p>Перечень позиций</p> <p> <input type="checkbox" /><span>элемент 1</span> </p> <p> <input type="checkbox" /><span>элемент 2</span> </p> <p> <input type="checkbox" /><span>элемент 3</span> </p> <p> <input type="checkbox" /><span>элемент 4</span> </p> </form> </td> <td> <form name="addElement"> <p id="text">Новая позиция</p> <p> <input type="text" name="newElement" /> </p> <input type="button" name="createElement" value="добавить" /> </form> </td> <tr> </table> </body> </html> |
Поставил клик на форму и все работает, большое спасибо!!!!!
|
Часовой пояс GMT +3, время: 23:51. |