javascript - 为什么在我单击添加按钮时每次单击都会多次附加我的 <i> 标记？

Question

我正在使用 HTML、CSS 和 jQuery 制作待办事项列表。因此，基本上，当用户键入一个事件并按下“+”按钮时，它会连同“删除”(Font Awesome 回收站)图标一起添加到列表中，以便用户可以删除该事件。我已经使用 .append() 函数实现了这个。但是，当用户添加第一项时，会出现一个删除按钮。然而，对于每个其他列表，删除按钮的数量成倍增加。 (例如，当用户添加第二个项目时，该项目有两个删除按钮，而当他们添加第三个项目时，该项目有三个删除按钮)。我不明白为什么会这样，解决这个问题的最佳方法是什么？

我在 .listInput 上使用了 .append() 并附加了 .newItem。 然后我在 .newItem 上使用了 .append() 并附加了 jar 头图标。

$(".enter").click(function() {
  var $item = $('input[name=add]').val();
  if ($item.length > 0) {
    $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '</li>');
    $('.newItem').append('<i class="animated fadeIn far fa-trash-alt fa-1x"></i>');
  } else {
    alert("Enter an acitvity to add");
  }
})

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="takeInput">
  <input type="text" name="add" value="Add Your Item Here">
  <i class="enter fas fa-plus fa-3x"></i>
</div>

<ul class="listInput">
</ul>

我只希望每个列表项有一个垃圾桶图标。

Answer 1

$('.newItem').append() 将向 所有 类 newItem 的元素附加一些内容，而不仅仅是一个你刚刚添加。要解决这个问题，只需使用一个附加项:

$(".enter").click(function() {
  var $item = $('input[name=add]').val();
  if ($item.length > 0) {
    $(".listInput").append('<li class="newItem animated fadeIn">' + $item + '<i class="animated fadeIn far fa-trash-alt fa-1x"></i></li>');
  } else {
    alert("Enter an acitvity to add");
  }
})

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="takeInput">
  <input type="text" name="add" value="Add Your Item Here">
  <i class="enter fas fa-plus fa-3x"></i>
</div>

<ul class="listInput">
</ul>