Как обновить объект элементов (jQuery.each())?

Question

[miniven]

Есть такой фрагмент кода:

<div class="employee">
	<select name="program_name[]">
		<option disabled>Выберите программу</option>
		<option value="">БС-1</option>
		<option value="">БС-2</option>
		<option value="">БС-3</option>
	</select>
	<button class="delete-btn"></button>
	<input type="text" name="employee_name" class="generate__input" id="employee_name" placeholder="Иванов Иван Иванович">
</div>

Через jQuery клонируется этот фрагмент.
Но, насколько я понимаю, deleteBtn.each() перебирает только те элементы, которые были на странице изначально (то есть один), динамически созданные не перебирает.
Поэтому я могу удалить первый элемент, но не могу любой другой

addBtn.click(function(e) {
		e.preventDefault();
		$( ".employee:first" ).clone().appendTo( ".generate__section_employee" );
	});

deleteBtn.each(function() {
		$(this).click(function(e) {
			e.preventDefault();
			if ($('.employee').length > 1) {
				$(this).parent().remove();
			}
		});
	});

Какое есть самое адекватное решение данной проблемы?

Answer 1

[PerfectLab]

Попробуйте так:

$(document).on('click', '.delete-btn', function(e){
    e.preventDefault();
    if ($('.employee').length > 1) {
        $(this).parent().remove();
    }
});

Comments

[miniven]

Работает, спасибо :)