Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Удаление добавленных элементов в DOM дереве (https://javascript.ru/forum/events/54891-udalenie-dobavlennykh-ehlementov-v-dom-dereve.html)

scrapmetal 05.04.2015 12:41
Удаление добавленных элементов в 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>

рони 05.04.2015 16:53
scrapmetal,

назначье клик либо вновь созданному элементу - либо изначально ставьте клик только на форму
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

scrapmetal 05.04.2015 17:03
<!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>

scrapmetal 05.04.2015 17:10
Поставил клик на форму и все работает, большое спасибо!!!!!


Часовой пояс GMT +3, время: 02:56.