0

$('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 не удаляетсявведите сюда описание изображения

2 ответа 2

2
  1. потому что вы обращаетесь к элементу, которого ещё нет на странице. Здесь нужно воспользоватся делегированием событий И код поменять немного:
$(document).on('click',".delete", function(){
        let parent = $(this).parent();
        parent.remove();
    })
  1. НИКОГДА, не делайте селектором html элемент. Это может вам очень больно аукнутся, если на странице появится 2й такой.
0
0

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

$('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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.