Удаление элемента JQuery

Question

$('button').on('click', function() {
  if ($('.input').val() == "") {
    alert('Введите дело');
    return
  }
  $('.todo').append(`<li>${$('.input').val()}
    		<button class="delete">&#10006</button></li>`);
  $('.input').val("");
})

$(".delete").on('click', function() {
  let parent = $(this).parent();
  parent.remove();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="spisok">
  <div class="spisok__text">ToDo List</div>
  <input class="input" type="text">
  <button>ADD</button>
  <ul class="todo">
  </ul>
</div>

Почему при нажатии на кнопку крестик, которая создаётся с классом .delete тег li не удаляется

Answer 1

потому что вы обращаетесь к элементу, которого ещё нет на странице. Здесь нужно воспользоватся делегированием событий И код поменять немного:

$(document).on('click',".delete", function(){
        let parent = $(this).parent();
        parent.remove();
    })

НИКОГДА, не делайте селектором html элемент. Это может вам очень больно аукнутся, если на странице появится 2й такой.

Answer 2

Вот так будет работать:

$('button').on('click', function(){
    if ( $('.input').val() == "" ) {
        alert('Введите дело');
        return
    }
    $('.todo').append(`<li>${$('.input').val()}
        <button class="delete">&#10006</button></li>`);
    $('.input').val("");
});



$(document).on('click', function(e){
    let clickedEl = e.target;
    if ($(clickedEl).hasClass('delete')) {
      $(clickedEl).parent().remove();
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css.css">
    </head>
    <body>
    	<div class="spisok">
    		
    		<div class="spisok__text">ToDo List</div>
    		
    			<input class="input" type="text">	
    		
    			<button>ADD</button>
    		
    		
    	

    		<ul class="todo">
    			
    		</ul>
    	</div>

    	



    	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    	<script src="alert.js"></script>
    </body>
    </html>

БЛОГ НА HUSL

Удаление элемента JQuery

Ответы (2 шт):