Форум

kireyev · #1 (**permalink**) 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 · #2 (**permalink**) 22.09.2010, 08:43

Сообщение от kireyev

document.getElementsByName

Слово Elements в названии функции как бы намекает, что возвращается не один элемент.

kireyev · #3 (**permalink**) 22.09.2010, 09:26

Сообщение от Kolyaj

Слово Elements в названии функции как бы намекает, что возвращается не один элемент.

Исправил функцию так:

function deleteobject() {
	var position = document.getElementById('position')
	var width = position.getElementByName('width2')  
	position.removeChild(width)
	}

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

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

Kolyaj · #4 (**permalink**) 22.09.2010, 09:31

Сообщение от kireyev

getElementByName

Такой функции нет.

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

kireyev · #5 (**permalink**) 22.09.2010, 09:39

Сообщение от Kolyaj

Слово Elements в названии функции как бы намекает, что возвращается не один элемент.

Но элемент с именем width2 единственный, в чем загвоздка?

kireyev · #6 (**permalink**) 22.09.2010, 10:11

Сообщение от Kolyaj

Такой функции нет.

Перечитал матчасть, переделал вот так:

function deleteobject() {
var position = document.getElementById('position')
var width = position.getElementsByName('width2')[0]
position.removeChild(width)
}

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

Kolyaj · #7 (**permalink**) 22.09.2010, 10:40

Этот метод только у document есть.

Sweet · #8 (**permalink**) 22.09.2010, 11:01

kireyev, тебе ведь нужно удалить 3 элемента. Не проще ли помещать их в div id='container'+x и удалять потом:

var elToDel = document.getElementById('container'+x)
elToDel.parentNode.removeChild(elToDel)
x--

kireyev · #9 (**permalink**) 22.09.2010, 11:31

Сообщение от Sweet

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>

Форум

Справочник

Discord чат

Курсы javascript