Динамическое добавление/удаление новых полей в форму? Что я делаю не так?

Question

[colorkid]

Всем привет.
Вот код https://jsfiddle.net/colorkid/m8eq95o0/

При прибавлении значения добавляются новые input, все ок. НО есть проблема, как я не пытался, не получается удалять данные поля. Т.е. мне нужно, что-бы при (допустим) 4 созданных новых полях (количество соответствует value в поле number), а при уменьшении значения в number, поля постепенно удалялись. Как такое сделать?

Answer 1

[Дмитрий Ковальский]

if(numberInput.value > 0){
		var inputNew = document.createElement('input');
		area.appendChild(inputNew);
 	}

Интересно. Что бы вы не ввели - элемент добавляется. Удаление не предусмотрено. Что тут не так? Все. Вы не проверяете новое значение. Вы не знаете увеличилось оно или уменьшилось. Вам в добавляемые инпуты надо добавить некий класс. Затем сравнивайте numberInput.value с числом инпутов с этим классом. Увеличилось? добавляете элемент. Уменьшилось? Удаляете какой-нибудь.

Comments

[colorkid]

Благодарю за разъяснение. Получилось

Answer 2

[Михаил Горячкин]

Вот держите простой пример:

var numberInput = document.getElementById("number");
var inputsCount = 0;

numberInput.onchange = function() {
	var value = this.value;
  
  if (this.value === 0) {
  	var last = area.lastChild;
        area.removeChild(last);
        return;
  }
  
  if (value < 0) {
  	value = 0;
        this.value = value;
  }
  
  if (value < inputsCount) {
        var last = area.lastChild;
        area.removeChild(last);
  }

  if(value > inputsCount){
	var inputNew = document.createElement('input');
	area.appendChild(inputNew);
  }
  
  inputsCount = value;
};

Главный косяк у вас в том, что вы не как у себя не считали кол-во добавляемых элементов. Да и использование inline - обработчиков не есть хорошо, используйте addEventListener.

Comments

[colorkid]

Спасибо за вариант.

Answer 3

[lega]

Вот вариант ещё проще.

Comments

[colorkid]

для меня это пока космос:) Пока реализовал так:
var numberInput = document.getElementById("number");
var plus = document.querySelector(".plus");

numberInput.onchange = function() {
var inputNew = document.createElement('input');
inputNew.classList.add('active');
var active = document.querySelectorAll(".active");

if(numberInput.value > active.length){
area.appendChild(inputNew);
}
if(numberInput.value < active.length){
area.removeChild(active[0]);
}
};