Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не удается удалить элемент (https://javascript.ru/forum/events/11934-ne-udaetsya-udalit-ehlement.html)

kireyev 22.09.2010 07:58
Не удается удалить элемент
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href = "style.css" type="text/css" media="screen">
<title></title>
<script type="text/javascript">
	var x = 1;
	function addobject() {
	x++
	var position = document.getElementById('position')
	
	var div1 = document.createElement('div')
	div1.innerHTML = 'Размеры позиции №'+x+', м:'
	position.appendChild(div1)

	var input1 = document.createElement('input')
	input1.setAttribute('type', 'text')
	input1.setAttribute('name', 'width'+x)
	position.appendChild(input1)
	input1.className = 'zakaz_right'

	var input2 = document.createElement('input')
	input2.setAttribute('type', 'text')
	input2.setAttribute('name', 'lenght'+x)
	position.appendChild(input2)
	input2.className = 'zakaz_right'
	}
	
	function deleteobject() {
	var position = document.getElementById('position')
	var width = document.getElementsByName('width2')
	position.removeChild(width)
	}</script>
</head>
<body>
	<h1>Оформление нового заказа</h1>
	<form id="zakaz_form" name = "form" method = "get" action = "index.php">
	
	<div class="zakaz_left">Заказчик: <a href="#">Выбрать</a></div>
	
	<div class="zakaz_left">Материал: <a href="#">Выбрать</a></div>
	
	<div id="position">
		<div class="zakaz_left">Размеры позиции №1, м:</div>
		<input class="zakaz_right" type="text" name="width1"/><input class="zakaz_right" type="text" name="lenght1"/>
	</div>
	
	<input type="button" value="+ позиция" onclick="addobject()"/>
	<input type="button" value="- позиция" onclick="deleteobject()"/>
	<div class="zakaz_left">Общий расход материала, п.м:</div>
	<input class="zakaz_right" type="text" name="rashod"/>
	<br>
	<input type = "button" value="Сохранить" OnClick = "form.submit()">
	</form>
</body>
</html>

У меня не работает функция deleteobject. Почему? Что я делаю не так?

Kolyaj 22.09.2010 08:43
Цитата:
Сообщение от kireyev
document.getElementsByName
Слово Elements в названии функции как бы намекает, что возвращается не один элемент.

kireyev 22.09.2010 09:26
Цитата:
Сообщение от Kolyaj (Сообщение 71562)
Слово Elements в названии функции как бы намекает, что возвращается не один элемент.
Исправил функцию так:
function deleteobject() {
	var position = document.getElementById('position')
	var width = position.getElementByName('width2')  
	position.removeChild(width)
	}


Все равно не работает...

Может дело в том, что я пытаюсь удалить динамически созданный элемент?

Kolyaj 22.09.2010 09:31
Цитата:
Сообщение от kireyev
getElementByName
Такой функции нет.

Вы консоль ошибок-то откройте.

kireyev 22.09.2010 09:39
Цитата:
Сообщение от Kolyaj (Сообщение 71562)
Слово Elements в названии функции как бы намекает, что возвращается не один элемент.
Но элемент с именем width2 единственный, в чем загвоздка?

kireyev 22.09.2010 10:11
Цитата:
Сообщение от Kolyaj (Сообщение 71567)
Такой функции нет.
Перечитал матчасть, переделал вот так:
function deleteobject() {
var position = document.getElementById('position')
var width = position.getElementsByName('width2')[0]
position.removeChild(width)
}

Но все равно выдает ошибку 'Объект не поддерживает это свойство или метод' на 3 строке (((

Kolyaj 22.09.2010 10:40
Этот метод только у document есть.

Sweet 22.09.2010 11:01
kireyev, тебе ведь нужно удалить 3 элемента. Не проще ли помещать их в div id='container'+x и удалять потом:
var elToDel = document.getElementById('container'+x)
elToDel.parentNode.removeChild(elToDel)
x--

kireyev 22.09.2010 11:31
Цитата:
Сообщение от Sweet (Сообщение 71583)
kireyev, тебе ведь нужно удалить 3 элемента. Не проще ли помещать их в div id='container'+x и удалять потом:
var elToDel = document.getElementById('container'+x)
elToDel.parentNode.removeChild(elToDel)
x--
Отличное решение, для потомков:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href = "style.css" type="text/css" media="screen">
<title></title>
<script type="text/javascript">
	var x = 1;
	function addobject() {
	x++
	var position = document.getElementById('position')
	
	var div1 = document.createElement('div')
	div1.setAttribute('id', 'div'+x)
	div1.innerHTML = 'Размеры позиции №'+x+', м:'
	position.appendChild(div1)

	var input1 = document.createElement('input')
	input1.setAttribute('type', 'text')
	input1.setAttribute('name', 'width'+x)
	div1.appendChild(input1)
	input1.className = 'zakaz_right'

	var input2 = document.createElement('input')
	input2.setAttribute('type', 'text')
	input2.setAttribute('name', 'lenght'+x)
	div1.appendChild(input2)
	input2.className = 'zakaz_right'
	}
	
	function deleteobject() {
	var elToDel = document.getElementById('div'+x)
	elToDel.parentNode.removeChild(elToDel)
	x--
	}
</script>
</head>
<body>
	<h1>Оформление нового заказа</h1>
	<form id="zakaz_form" name = "form" method = "get" action = "index.php">
	
	<div class="zakaz_left">Заказчик: <a href="#">Выбрать</a></div>
	
	<div class="zakaz_left">Материал: <a href="#">Выбрать</a></div>
	
	<div id="position">
		<div class="zakaz_left">Размеры позиции №1, м:</div>
		<input class="zakaz_right" type="text" name="width1"/><input class="zakaz_right" type="text" name="lenght1"/>
	</div>
	
	<input type="button" value="+ позиция" onclick="addobject()"/>
	<input type="button" value="- позиция" onclick="deleteobject()"/>
	<div class="zakaz_left">Общий расход материала, п.м:</div>
	<input class="zakaz_right" type="text" name="rashod"/>
	<br>
	<input type = "button" value="Сохранить" OnClick = "form.submit()">
	</form>
</body>
</html>


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