Проблема с lastChild и removeChild
Доброго времени суток.
Есть код, который добавляет поля при клике на кнопке и удаляет их. код javascript:
<script language="javascript">
function add_inputsize()
{
countonesize = ++document.getElementById('inputsizecount').value;
var new_input=document.createElement('div');
new_input.innerHTML='<table width="450px">bla-bla</table><br />';
document.getElementById('inputsize').appendChild(new_input);
}
function del_inputsize()
{
countonesize = document.getElementById('inputsizecount').value;
if (countonesize!=0){ // Удаляем любую строку кроме первой
document.getElementById('inputsize').removeChild(document.getElementById('inputsize').lastChild);
document.getElementById('inputsizecount').value -= 1; // Уменьшаем счетчик элементов
}
return false;
}
</script>
На странице:
<div id="inputsize">
<input type="hidden" id="inputsizecount" name="inputsizecount" value="0">
<table width="450px">bla-bla</table>
<br />
</div>
<input type="button" onclick="add_inputsize()" value="Добавить размер">
<input type="button" onclick="del_inputsize()" value="Убрать последний">
Проблема в чем: все работает, но если я создаю при загрузке уже 2 дива (один вложенный - как создавался бы при клике на кнопку), например:
<div id="inputsize">
<input type="hidden" id="inputsizecount" name="inputsizecount" value="0">
<table width="450px">bla-bla</table>
<br />
<div>//вложенный див
<table width="450px">bla-bla</table>
<br />
</div>
</div>
<input type="button" onclick="add_inputsize()" value="Добавить размер">
<input type="button" onclick="del_inputsize()" value="Убрать последний">
то он ни в какую не хочет удаляться при клике на кнопку. Причем если я жму дальше добавить - новые дивы и добавляются, и удаляются, а тот, что я создала при загрузке - никак. При проверке lastchild - он пишет, что это элемент #text, хотя должен быть objectdiv (или как он там). Подскажите, что не так? |
Alyona, так ему нечего удалять за счет этой строки
if (countonesize!=0){
в <input type="hidden" id="inputsizecount" name="inputsizecount" value="0"> у вас записано, что количество элементов = 0, значит последний элемент (если он не первый по умолчанию) удален не будет |
Нее, с этим все в порядке. Когда я делаю вложенный див - я в счетчике пишу 1 или количество вложенных дивов.
Функция работает - он уменьшается, но див не исчезает. |
Цитата:
<html>
<head>
<script language="javascript">
function add_inputsize()
{
countonesize = ++document.getElementById('inputsizecount').value;
var new_input=document.createElement('div');
new_input.innerHTML='<table width="450px">bla-bla</table><br />';
document.getElementById('inputsize').appendChild(new_input);
}
function del_inputsize()
{
countonesize = document.getElementById('inputsizecount').value;
if (countonesize!=0){ // Удаляем любую строку кроме первой
document.getElementById('inputsize').removeChild(document.getElementById('inputsize').lastChild);
document.getElementById('inputsizecount').value -= 1; // Уменьшаем счетчик элементов
}
return false;
}
</script>
</head>
<body>
<!--<div id="inputsize">
<input type="hidden" id="inputsizecount" name="inputsizecount" value="0">
<table width="450px">bla-bla</table>
<br />
</div>-->
<div id="inputsize">
<input type="hidden" id="inputsizecount" name="inputsizecount" value="1">
<table width="450px">bla-bla</table>
<br />
<div>
<table width="450px">bla-bla</table>
<br />
</div></div>
<input type="button" onclick="add_inputsize()" value="Добавить размер">
<input type="button" onclick="del_inputsize()" value="Убрать последний">
</body>
</html>
|
Ну? Я так и пишу, див не исчезает.
|
Alyona, вы где проверяете? у меня в FF 15, GC 22, IE 8 робит
|
Chrom, mozilla - не исчезает див, который сделала руками.
|
Если делаю 2 дива, т.е. их в итоге 3 - получается так:
жму удалить - див остается, счетчик -1 жму еще раз - див удаляется (последний, третий), счетчик -1 В итоге остается 2 дива, а должен быть один. |
Да, я вижу, что работает. Ну у меня на сайте, конечно, не такой простой пример. Что ж не так я сделала?
|
В общем, в моем навороченном коде функция срабатывает после второго раза, значит он что-то еще добавляет.
Что это может быть? У меня в дивах таблица (без tbody) + р с текстом и инпутами. Они могут на что-то влиять? |
Alyona, в данном случае должен влиять только счетчик inputsizecount
дайте ссылку на ваш "нерабочий" пример... |
Не могу. Сайт на внутреннем серваке и это все в админке.
Могу только написать полный пример дива. |
<div id="inputsize">
<input type="hidden" id="inputsizecount" name="inputsizecount" value="3">
<table width="450px">
<tr height="28px"><td>Длина</td><td><input name="length0" id="myid" value="10.2" size="10"></td>
<td colspan="2" rowspan="1"><input type="checkbox"
checked="checked" onclick="if(this.checked){document.getElementById('discount0').style.display='inline-block'; document.getElementById('price0').style.display='none';}else {document.getElementById('price0').style.display='inline-block'; document.getElementById('discount0').style.display='none';}">
Цена со скидкой</td>
</tr>
<tr><td>Ширина</td><td><input name="width0" id="myid" value="10.1" size="10"></td>
<td colspan="2" rowspan="2" width="150px" height="55px">
<p id="discount0" style="display:inline-block">Старая цена<input name="oldprice0" id="myid" value="1000" size="10"><br />
Новая цена<input name="newprice0" id="myid" value="500" size="10">
</p>
<p id="price0" style="display:none">Цена<input name="price0" id="myid" value="500" size="10">
</p>
</td>
</tr>
<tr><td>Высота</td><td><input name="height0" id="myid" value="10" size="10"></td>
</tr>
</table>
<br />
<div>
<table width="450px">
<tr height="28px"><td>Длина</td><td><input name="length1" id="myid" value="10" size="10"></td>
<td colspan="2" rowspan="1"><input type="checkbox" checked="checked" onclick="if(this.checked){document.getElementById('discount1').style.display='inline-block'; document.getElementById('price1').style.display='none';}else {document.getElementById('price1').style.display='inline-block'; document.getElementById('discount1').style.display='none';}">
Цена со скидкой</td>
</tr>
<tr><td>Ширина</td><td><input name="width1" id="myid" value="10" size="10"></td>
<td colspan="2" rowspan="2" width="150px" height="55px">
<p id="discount1" style="display:inline-block">Старая цена<input name="oldprice1" id="myid" value="1200.2" size="10"><br />
Новая цена<input name="newprice1" id="myid" value="1000" size="10">
</p>
<p id="price1" style="display:
none ">Цена <input name="price1" id="myid" value="1000" size="10">
</p>
</td>
</tr>
<tr><td>Высота</td><td><input name="height1" id="myid" value="15" size="10"></td>
</tr>
</table>
<br />
</div>
<div>
<table width="450px">
<tr height="28px"><td>Длина</td><td><input name="length2" id="myid" value="12" size="10"></td>
<td colspan="2" rowspan="1"><input type="checkbox" checked="checked" onclick="if(this.checked){document.getElementById('discount2').style.display='inline-block'; document.getElementById('price2').style.display='none';}else {document.getElementById('price2').style.display='inline-block'; document.getElementById('discount2').style.display='none';}">
Цена со скидкой</td>
</tr>
<tr><td>Ширина</td><td><input name="width2" id="myid" value="10" size="10"></td>
<td colspan="2" rowspan="2" width="150px" height="55px">
<p id="discount2" style="display:inline-block">Старая цена <input name="oldprice2" id="myid" value="12.5" size="10"><br />
Новая цена<input name="newprice2" id="myid" value="10" size="10">
</p>
<p id="price2" style="display:
none ">Цена<input name="price2" id="myid" value="10" size="10">
</p>
</td>
</tr>
<tr><td>Высота</td><td><input name="height2" id="myid" value="11.1" size="10"></td>
</tr>
</table>
<br />
</div>
<div>
<table width="450px">
<tr height="28px"><td>Длина</td><td><input name="length3" id="myid" value="10" size="10"></td>
<td colspan="2" rowspan="1"><input type="checkbox" onclick="if(this.checked){document.getElementById('discount3').style.display='inline-block'; document.getElementById('price3').style.display='none';}else {document.getElementById('price3').style.display='inline-block'; document.getElementById('discount3').style.display='none';}">
Цена со скидкой</td>
</tr>
<tr><td>Ширина</td><td><input name="width3" id="myid" value="10" size="10"></td>
<td colspan="2" rowspan="2" width="150px" height="55px">
<p id="discount3" style="display:none">Старая цена<input name="oldprice3" id="myid" value="0" size="10"><br />
Новая цена<input name="newprice3" id="myid" value="500" size="10">
</p>
<p id="price3" style="display:
inline-block ">Цена <input name="price3" id="myid" value="500" size="10">
</p>
</td>
</tr>
<tr><td>Высота</td><td><input name="height3" id="myid" value="11" size="10"></td>
</tr>
</table>
<br />
</div>
</div>
<input type="button" onclick="add_inputsize()" value="Добавить размер">
<input type="button" onclick="del_inputsize()" value="Убрать последний">
|
| Часовой пояс GMT +3, время: 22:41. |