Показать сообщение отдельно
  #1 (permalink)  
Старый 05.04.2015, 12:41
Новичок на форуме
Отправить личное сообщение для scrapmetal Посмотреть профиль Найти все сообщения от scrapmetal
 
Регистрация: 22.03.2015
Сообщений: 6

Удаление добавленных элементов в 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>
Ответить с цитированием