Блог

Главная - Вопросы по программированию - Как удалить созданный li, нажав на кнопку с помощью jQuery?

Как удалить созданный li, нажав на кнопку с помощью jQuery?

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Прямо сейчас мой код позволяет кому-либо создавать li , отправляя название фильма и его рейтинг. В конце этого также появляется кнопка удаления li . Я хочу, чтобы это li было удалено после нажатия кнопки удаления. Я понимаю, как это сделать с помощью Javascript, однако как вы делаете это с помощью jQuery? Способы, которыми я пытался это сделать, следующие:

 $('li button').click( function(e) {
    e.target.closest('.li').remove();
})

$('li').on("click", "button", function() {
    $(this).remove()
})

Я знаю, что в Jquery есть другие способы удаления li , но что не так с двумя вышеупомянутыми методами? это то, как я выбрал элементы? Весь мой HTML и JS приведены ниже. Заранее спасибо!

 $('#movieForm').submit(function(event) {
    event.preventDefault();

    let movieInput = $("#movieTitle").val();
    let ratingInput = $("#rating").val();

    $('#movieList').append("<li>"   movieInput   " "   ratingInput   "<button>Remove</button></li>");
    })

$('li button').click( function(e) {
    e.target.closest('.li').remove();
})  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Movies App!</title>
  <link rel="stylesheet"
        href="https://unpkg.com/bootstrap/dist/css/bootstrap.css">
</head>

<body>
<h1>Movies App!</h1>
  <ul id="movieList">

  </ul>
<form id="movieForm">
  <input id="movieTitle" placeholder="Movie Title">
  <input id="rating" placeholder="Rating">
  <input type="submit" id="submit"></button>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="MoviesApp.js"></script>
</body>

</html>

Ответ №1:

Ваше использование on() почти правильное, есть только два недостатка. Во-первых, основным селектором должен быть ближайший родительский элемент к цели, который существует в DOM при загрузке страницы, в данном случае ul . Вам также необходимо удалить все, li когда произойдет событие, а не button , поэтому используйте closest() . Попробуйте это:

 jQuery($ => {
  $('#movieForm').submit(e => {
    e.preventDefault();
    let movieInput = $("#movieTitle").val();
    let ratingInput = $("#rating").val();
    $('#movieList').append(`<li>${movieInput} ${ratingInput}<button>Remove</button></li>`);
  })

  $('ul').on("click", "li button", e => $(e.target).closest('li').remove());
});  
 <link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.css">
<h1>Movies App!</h1>
<ul id="movieList"></ul>
<form id="movieForm">
  <input id="movieTitle" placeholder="Movie Title">
  <input id="rating" placeholder="Rating">
  <input type="submit" id="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Обратите внимание, что в приведенном выше примере я использовал функции со стрелками и литералы шаблона. Ни то, ни другое не имеет отношения к возникшей у вас проблеме, это просто некоторый синтаксический сахар, чтобы сделать логику более сжатой.

Комментарии:

1. Спасибо! Теперь я понимаю, почему он распознавал ul как родительский, а не li. Ценю помощь