Как при клике на кнопку удалить инпут (и не только, ниже всё расписал)?

Question

[Bazen]

Есть значит кнопка 'Добавить ребенка', при нажатии появляется блок с кнопкой '<2 лет' (Весь код с кнопками, инпутами есть ниже); при нажатии на кнопку '<2 лет', создается инпут с кнопкой удалить'Х', при нажатию на кнопку удалить 'X', удаляется инпут который был создан, но когда я хочу создать ещё один инпут после удаления предыдущего, то он не создается, вылезает ошибка; и ещё если я создам много инпутов, и захочу удалить один, то удаляются все.
(Без разницы на jquery или js решить проблему).
Помогите пожалуйста.
Спасибо

HTML:

<form action="#" class="quiz__form_tourists">
  <button class="quiz__tourists-btn">
            Добавить ребёнка
        </button>
  <div class="years-old__inputs"></div>
</form>
<div class="quiz__block_years-old-wrap">
  <div class="years-old__title">
    Выберите возраст ребёнка
  </div>
  <div class="quiz__block_years-old">
    <button class="years-old__item years-old-1 box-shadow-hover">
                < 2 лет
            </button>
  </div>
</div>

CSS:

.quiz__block_years-old-wrap {
  display: none;
}

JS:

window.addEventListener('load', function() {
  let formTourists = document.querySelector('.quiz__form_tourists');
  let btnTourists = document.querySelector('.quiz__tourists-btn');
  let yearsOldBlock = document.querySelector('.quiz__block_years-old-wrap');
  btnTourists.addEventListener('click', function() {
    formTourists.style.display = 'none';
    yearsOldBlock.style.display = 'block';
  });

  let yearsOld1 = document.querySelector('.years-old-1');
  yearsOld1.addEventListener('click', function() {
    formTourists.style.display = 'block';
    yearsOldBlock.style.display = 'none';
    let yearsInputs = document.querySelector('.years-old__inputs');
    var str = '</div class="years-input-wrap"><button class="years-input-remove">х</button><input type="text" class="years-input" placeholder="ребёнок до 2-х лет"></div>';
    yearsInputs.innerHTML += str;

    let inputRemove = document.querySelector('.years-input-remove');
    inputRemove.addEventListener('click', function() {
      this.parentNode.remove();
    });
  });
});

Answer 1

[Дмитрий]

<form action="#" class="quiz__form_tourists">
  <button class="quiz__tourists-btn">
            Добавить ребёнка
        </button>
  <div class="years-old__inputs"></div>
</form>
<div class="quiz__block_years-old-wrap">
  <div class="years-old__title">
    Выберите возраст ребёнка
  </div>
  <div class="quiz__block_years-old">
    <button class="years-old__item years-old-1 box-shadow-hover">
                больше 2 лет
            </button>
  </div>
</div>

let formTourists = document.querySelector('.quiz__form_tourists');
  let btnTourists = document.querySelector('.quiz__tourists-btn');
  let yearsOldBlock = document.querySelector('.quiz__block_years-old-wrap');
  btnTourists.addEventListener('click', function(e) {
  	e.preventDefault();
    formTourists.style.display = 'none';
    yearsOldBlock.style.display = 'block';
  });

  let yearsOld1 = document.querySelector('.years-old-1');
  yearsOld1.addEventListener('click', function(e) {
  	e.preventDefault();
    formTourists.style.display = 'block';
    yearsOldBlock.style.display = 'none';
    let yearsInputs = document.querySelector('.years-old__inputs');
    let str = '<div class="years-input-wrap"><button class="years-input-remove">х</button><input type="text" class="years-input" placeholder="ребёнок до 2-х лет"></div>';
    yearsInputs.innerHTML += str;

    let inputRemove = document.querySelectorAll('.years-input-remove');
    
    for(let i = 0; i < inputRemove.length; i++){
    	inputRemove[i].addEventListener('click', function(e) {
      e.preventDefault();
      e.currentTarget.parentNode.remove();
    	});
    }
  });

вы забываете, что у вас больше чем 1 блоков "years-old__inputs". Поэтому используйте - querySelectorAll и добавляйте события в цикле.

Comments

[Bazen]

Большое спасибо! Работает