Я понимаю, что вы уже приняли ответ на этот вопрос, но я не был рад оставить вопрос как есть. Также: мне было немного скучно. Сделай из того, что ты будешь ...
Так! Вот мой (запоздалый) ответ.
Преимущества моего подхода или его обоснования:
- Вы можете использовать
select для удаления и добавления строк.
- При удалении строк с использованием
select для удаления строк сначала удаляются эти строки с пустыми input s, а затем удаляется любое количество заполненных input-содержащих строк с конца.
- Позволяет также использовать ссылки
.remScnt.
Надеюсь, это что-то, даже академическое, для вас или интересное:
function makeRow() {
var div = document.createElement('div'),
input = document.createElement('input'),
a = document.createElement('a');
t = document.createTextNode('remove');
div.className = 'line';
input.type = 'text';
a.href = '#';
a.className = 'remScnt';
a.appendChild(t);
div.appendChild(input);
div.insertBefore(a, input.nextSibling);
return div;
}
$('#inputs').change(
function() {
var num = $(this).val(),
cur = $('div.line input:text'),
curL = cur.length;
if (!curL) {
for (var i = 1; i <= num; i++) {
$(makeRow()).appendTo($('body'));
}
}
else if (num < curL) {
var filled = cur.filter(
function() {
return $(this).val().length
}),
empties = curL - filled.length,
dA = curL - num;
if (empties >= num) {
cur.filter(
function() {
return !$(this).val().length;
}).parent().slice(-num).remove();
}
else if (empties < num) {
var remainder = num - empties;
cur.filter(
function() {
return !$(this).val().length;
}).parent().slice(-num).remove();
$('div.line').slice(-remainder).remove();
}
}
else {
var diff = num - curL;
for (var i = 0; i < diff; i++) {
$(makeRow()).appendTo($('body'));
}
}
});
$('body').on('click', '.line a.remScnt', function() {
console.log($(this));
$(this).parent().remove();
});
JS Fiddle demo .
Обратите внимание, что я предпринял небольшую, или (точнее) нет, попытку обеспечить кросс-браузерную простоту использования с этим. Нативные методы DOM, используемые в функции makeRow(), используются для (незначительной оптимизации увеличения) скорости, при этом использование jQuery (с его кросс-браузерными абстракциями может сделать вещи еще более надежными. И стоит задуматься.
Ссылки:
Родной ванильный JavaScript:
jQuery материал: