Почему не удаляется поле инпут?
 

Здравствуйте.
Есть код по динамическому добавлению полей:

<form>
<div id="inputi">
<div><input name="my_input"><input type="button" value="+" onclick="add_input(this.parentNode)"></div>
</div>
</form>
<script language="javascript">
// Теперь эта функция будет принимать указатель на объект, после которого нужно осуществить вставку
<script language="javascript">
// Теперь эта функция будет принимать указатель на объект, после которого нужно осуществить вставку
function add_input(obj)
{
var new_input=document.createElement('div');
new_input.innerHTML='<table border="2"><tr><td>Изображение '+(document.getElementById('inputi').getElementsByTagName('div').length + 2)+'</td><td>Описание</td></tr><tr><td><input name="picture[]" type="file" class="required"></td><td><input name="about[]" type="text" class="required">';
// Дописываем рядом с input-ом кнопку, она будет добовлять элемент именно под input, рядом с которым она находится
new_input.innerHTML=new_input.innerHTML+'<input type="button" value="+" onclick="add_input(this.parentNode)">';
// И еще одна кнопочка для его удаления.
new_input.innerHTML=new_input.innerHTML+'<input type="button" value="-" onclick="del_input(this.parentNode)"></td></tr></table>';
//Ищем присутствует ли следующий узел в структуре DOM-а
if (obj.nextSibling)
    // если да - то создаем после него
    document.getElementById('inputi').insertBefore(new_input,obj.nextSibling)
//если такого не нашлось то просто добавляем в конец
else document.getElementById('inputi').appendChild(new_input);
}
// А эта функция будет принимать указатель на объект, который нужно удалить
function del_input(obj)
{
document.getElementById('inputi').removeChild(obj)
}
</script>

<form action="1.php" name="test" id="test">
	<div id="inputi"><table border="2">
<tr><td>Изображение 1</td><td>Описание</td></tr><tr><td><input name="picture[]" type="file" class="required"></td><td><input name="about[]" type="text" class="required"><input type="button" value="+" onclick="add_input(this.parentNode)">
</td></tr></table></div></form>

В таком варианте код и добавляет и удаляет поля, кнопки добавления у удаления находятся под строкой (не в одной строке, а под ней).

Если изменить скрипт добавления полей так:

function add_input(obj)
{
var new_input=document.createElement('div');
new_input.innerHTML='<table border="2"><tr><td>Изображение '+(document.getElementById('inputi').getElementsByTagName('div').length + 2)+'</td><td>Описание</td></tr><tr><td><input name="picture[]" type="file" class="required"></td><td><input name="about[]" type="text" class="required"><input type="button" value="+" onclick="add_input(this.parentNode)"><input type="button" value="-" onclick="del_input(this.parentNode)"></td></tr></table>';
// Дописываем рядом с input-ом кнопку, она будет добовлять элемент именно под input, рядом с которым она находится
//new_input.innerHTML=new_input.innerHTML+'<input type="button" value="+" onclick="add_input(this.parentNode)">';
// И еще одна кнопочка для его удаления.
//new_input.innerHTML=new_input.innerHTML+'<input type="button" value="-" onclick="del_input(this.parentNode)"></td></tr></table>';
//Ищем присутствует ли следующий узел в структуре DOM-а
if (obj.nextSibling)
    // если да - то создаем после него
    document.getElementById('inputi').insertBefore(new_input,obj.nextSibling)
//если такого не нашлось то просто добавляем в конец
else document.getElementById('inputi').appendChild(new_input);
}

То все кнопки находятся в одной строке, но тогда не срабатывает удаление поля инпут.
Ломаю голову, но не могу понять в чем ошибка
Пожалуйста подскажите в чем ошибка и как можно ограничить количество добавления полей.

Что за чушь?

Кавычки конфликтуют.

Ну в первом варианте вы сначала пишете в innerHTML, а потом добавляете к тому же самому innerHTML ещё немножко разметки, но innerHTML уже оказывается другим.
var keke = document.createElement("div");
keke.innerHTML = "<table><tr><td>lolwut";
Что возвратит keke.innerHTML? "<table><tr><td>lolwut</td></tr></table>"
Именно поэтому и работает код удаления элемента, так как this.parentNode кнопки ссылается на нужный заключающий <div>. А во втором варианте всё добавляется верно и кнопка вставляется в мини-таблицу, но тогда this.parentNode ссылается уже на <td> и удаления не происходит.

опечатки - исправил(но на результат не влияет)

Kfuse,
а как тогда быть, как можно исправить?
и есть ли возможность ограничить количество добавляемых полей?

Ну наверное легче взять второй вариант, и пририсовать несколько дополнительных parentNode в аргуметы del_input и add_input. Типа того:
(this.parentNode.parentNode.parentNode.parentNode. parentNode). Вроде столько нужно (там же ещё tbody добавится..)

Чё-т пробел сам появляется перед последним parentNode. И кстати в форме тоже желательно аргументу add_input пару parentNode пририсовать. На функциональность это не повлияет, но неправильный, хотя и рабочий скрипт - дело некрасивое.

это да. добавил parentNode в add и del - теперь все нормально удаляется и добавляется. Спасибо за ответ.
Остался только один вопрос. - можно ли ограничить добавление поле (чтобы пользователь мог добавить не больше 10 полей к примеру) ?

Можно вписать в начало функции add_input вот это.
if (document.getElementById('inputi').getElementsByTa gName('div').length > 8) return;
Выглядит, конечно, некрасиво (по многим причинам), но дело сделает.

вот за это отдельное спасибо - никто за неделю не ответил на подобный вопрос.
А по поводу "некрасиво",- главное рабочий вариант, без ошибок, а потом уже красота...
P/S/ второй раз честно заработанный "+" поставить система уже не позволяет...