Можно ли запросить подтверждение перед удалением элемента списка?

Question

У меня есть некоторый код, который может составить список, когда вы нажимаете на элемент списка, он удаляется, однако я хотел бы попросить подтверждение перед его удалением. Я понятия не имею, как это сделать

JQuery:

$(document).ready(function($) {
        $('form').submit(function() {
            if ($('.input').val() !== '') {
                var newTask = $('.input').val();
                var newLi = $('<li>' + newTask + '</li>');
                newLi.on('click', function() {
                    $(this).remove();
                });
                $('ul').prepend(newLi);
                $('.input').val('');
                return false;
            }
        });
        $('ul').sortable(); :)
    });

Answer 1

Вы можете использовать встроенную Подтверждение () , которая возвращает логическое значение.

$(document).ready(function($) {
  $('li').on('click', function() {
    if (confirm('Please confirm to delete')) {
      $(this).remove();
    }
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Answer 2

Добавить что-то вроде этого

function() {
     if (confirm("confirmation text")) {
        $(this).remove();
     }
}

Answer 3

Чтобы запросить подтверждение формы, вы можете использовать диалог confirm(). Он модальный и возвращает true или false в зависимости от опции, на которую нажал пользователь.

Также обратите внимание, что вы можете внести несколько улучшений кода здесь. Во-первых, используйте один делегированный обработчик событий вместо привязки нового обработчика к каждому li, который вы создаете. Во-вторых, вызовите preventDefault() для события submit вместо возврата false. Наконец, кэшируйте селектор .input вместо того, чтобы делать запрос DOM каждый раз, когда это необходимо. Попробуйте это:

jQuery(function($) {
  $('ul').on('click', 'li', function() {
    if (confirm('Are you sure?')) {
      $(this).remove();
    }
  })

  var $input = $('.input');

  $('form').submit(function(e) {
    e.preventDefault();
    if ($input.val() !== '') {
      var newTask = $('.input').val();
      $('ul').prepend('<li>' + newTask + '</li>');
      $input.val('');
    }
  });

  $('ul').sortable();
});