у мне нужно сделать todo list, то есть когда я нажимаю на checkbox елемент должен пропасть, и все прекрасно работает, только, если создать через кнопку такой же елемент, почему-то обработчик не слушает
$('.main__add-btn').on('click', function() {
// показать форму
$('.main__form-create').show();
})
$('.main__add-task').on('click', function() {
let valueOfTextarea = $('.main__task-input').val();
// $('.main__add').append(`<p>${valueOfTextarea}</p>`)
$('.main__new-tasks').append(`<li class="main__task-in-progress">
<label>
<input type="checkbox" class="main__task-checkbox" name="taskName" >
${valueOfTextarea}
<label>
</li>`)
})
let checkbox = $('input[type="checkbox"]')
//
$(document).on('click', '.main__task-checkbox', function() {
console.log($(this).attr('class'));
$(this).closest('.main__task-in-progress').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="main">
<div class="main__add">
<ul class="main__new-tasks">
<li class="main__task-in-progress">
<label>
<input type="checkbox" class="main__task-checkbox" name="taskName" id="task1">
выывывы
<label>
</li>
<li class="main__task-in-progress">
<label>
<input type="checkbox" class="main__task-checkbox" name="taskName" id="task1">
выывывы
<label>
</li>
<li class="main__task-in-progress">
<label>
<input type="checkbox" class="main__task-checkbox" name="taskName" id="task1">
выывывы
<label>
</li>
</ul>
<a href="#" class="main__add-btn">Add task</a>
<div class="main__form-create disabled">
<form action="#" method="dialog" class="main__form">
<div class="main__task-info">
<input type="text" class="main__task-input" placeholder="I need to do...">
</div>
<div class="main__buttons">
<button class="main__add-task">Add task</button>
<button class="main__cansel">Cansel</button>
</div>
</form>
</div>
</div>
</main>
в данном коде jquery, простите я не знаю как его подключить к Stack