Удаление отдельных элементов с помощью jQuery после их добавления на страницу

Добрый день, люди

Я столкнулся с небольшой проблемой при создании основной страницы корзины. Проблема в том, что когда я динамически добавляю команды в список покупок, кнопка «Удалить» удаляет все команды, а не только ту, к которой она добавлена.

Как я могу сделать так, чтобы кнопка «Удалить» удаляла только один элемент за раз? Спасибо!

Вот сценарий, который я использую —

<script>
function removeTeam() {
    $("#teamAdded, .removeBtn").remove();
    $("br").remove();
    }  
$(document).ready(function(){  
  $('#submit').click(function(){
    var teamToAdd = $("#teamname").val();
    if(teamToAdd!==undefined && teamToAdd.length>0){
     var html = "<span id='teamAdded'>" + teamToAdd + "</span>" + "<button class='removeBtn' onClick='removeTeam();'>" + "Remove" + "</button>" + "<br>";
      $("#items").append(html);
    }
  });    
});  
</script>

Ссылка Codepen здесь: здесь

1 ответ

  1. Дано следующее упрощенное HTML:

    HTML

    <input id="teamname">
    <input id="submit" type="button" value="Add">
    <div id="items">
    
    </div>
    

    Вы можете удалить только нажатый на элемент таким образом:

    JQuery

      $('#submit').on('click',function() {
        var teamToAdd = $("#teamname").val();
        $("#teamname").val('');
        if (teamToAdd !== undefined && teamToAdd.length > 0) {
          var html = "<div><span class='teamAdded'>" + teamToAdd + "</span>" + '<input type="button" class="removeBtn" value="Remove"></div>';
          $("#items").append(html);
        }
      });
    $('#items').on('click', 'input', function (event) {
        console.log($(this).prev('span'));
        $(this).parent('div').remove();
      });
    

    Некоторые вещи, чтобы отметить

    • Я удалил недопустимый HTML, который был создан путем добавления нескольких
      элементы с одинаковым идентификатором.
    • Я изменил HTML, который вы добавляете, обернув элементы в div.
      Это устраняет необходимость <br>и упрощает удаление
      потому что теперь нам нужно только удалить div.
    • Я избавился от встроенного обработчика и заменил его функцией, которая
      будет привязываться к динамически добавляемым элементам.
    • Когда кнопка Удалить нажата, мы ищем Родительский div для
      нажмите на кнопку и удалите ее. Это удаляет человека
      элемент.

    Вот демо-версия JS Fiddle .