Почему удаляется только вышестоящий элемент? Как применять код на все элементы?

Question

[Эмиль Рахматуллин]

Почему-то удаляется только самый первый блок с input.
Все последующие игнорит.

Вот js:

$('#delete_input').click(function() {
	$(this).parents('.form-row').remove();
});

А вот html:

<div id="form_input_service" class="form-row">
	<div class="form-group col-8">
		<input type="text" class="form-control" placeholder="Направление">
	</div>
						
	<div class="form-group col-1 justify-content-center">
		<div id="delete_input" class="cansel_btn_input" title="Удалить изображение"><img src="img/cancel-button.png" alt=""></span></div>
	</div>
</div>

[РЕШЕНО] - Пошёл другим путём. Вот исправленный код (если кому нужен):

writeElemIndex('.form-row');
 $('#appendInpot').click(function(e) {
    // body...
    e.preventDefault();
    $(elemInputService).insertAfter('.form-row:last');
    writeElemIndex('.form-row');


  });

 $(document).on('click', '#delete_input', function(e) {
    // body...
    e.preventDefault();
    $(this).closest('.form-row').hide();

  });

 function writeElemIndex(classElem, insertElem) {
    // insertElem - where we want to insert 
    var list = $(classElem); // find all elements
    list.each(function() {
      var self = $(this); // current elem in the list
      var index = self.index(); // get his number
      self.append();
    });
  }

Comments

[ⓒⓢⓢ]

Как применять код на все элементы?

Почему-то удаляется только самый первый блок с input.

Что заставило вас из кучи методов множественной выборки, сделать именно через единственную выборку по уникальным идентификаторам?

[Эмиль Рахматуллин]

JRK_DV, ну а как выбирать всё?

[Сергей Анисимов]

Эмиль Рахматуллин, на одной странице не должно быть 2х одинаковых идентификаторов, привязывайтесь к классу, т.е. не id="delete_input" а class="delete_input"
$('.delete_input').click(...);

[ⓒⓢⓢ]

Эмиль Рахматуллин, по примеру из вашего куска кода:
$('#delete_input').click(...)
будет эквивалентно:
$('.form-row .cansel_btn_input').click(...)
с различием, что во втором случае для выборки используются классы, которых может быть множество одинаковых на странице.

Answer 1

[Rsa97]

А какой ещё может удаляться? Элемент с id="delete_input" на странице может быть только один, родитель с class="form-row" в вашем случае у него тоже один, вот этот родитель и удаляется.

Comments

[Эмиль Рахматуллин]

Тогда как мне присвоить каждому уникальный class? Там новые блоки добавляются по нажатию на кнопку.

[Rsa97]

Эмиль Рахматуллин, А зачем нужен уникальный класс? Нажатый элемент у вас определяется через this.
Если же у вас новые элементы создаются динамически, то надо использовать не .click, а .on:

$('body').on('click', '.delete_input', function() {
...
});

Answer 2

[Юрий Янин]

У вас код сейчас выглядит словами так: При нажатии на блок с id delete_input, найти предка этого блока(из-за this ) с классом form-row и удалить его. Но из выданного вами html кода, выглядит так, что этого достаточно. Я не могу понять, что вы именно хотите удалять.

Comments

[Эмиль Рахматуллин]

Блок удаляется, но этот блок не один, там есть ещё такие, и у них есть такая же кнопка удаления, но она не работает. Хотя блок тот же. Как сделать так, чтобы этот код работал и на других блоках?