Question

美好的一天人

我在创建基本购物车页面时遇到了一个小问题。问题是当我动态地将团队添加到购物清单时，“删除”按钮会删除所有团队，而不仅仅是其附加到的团队。

如何获取它，以便“删除”按钮一次只删除一个元素？谢谢！

这是我正在使用的脚本 -

<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链接：Here

Answer 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 具有相同身份的元素。
我通过将元素包装在div中来更改您添加的HTML。这消除了对<br>的需要并简化了删除因为现在我们只需要删除div。
我摆脱了内联处理程序并用一个函数替换它将绑定到您动态添加的元素。
单击“删除”按钮时，我们会查找父级div 单击按钮，然后将其删除。这将删除个人元件。

这是JS Fiddle demo。

将jQuery添加到页面后，使用jQuery删除单个元素

1 个答案: