javascript - 我只想删除我单击的父标签

Question

我的代码中有 3 个按钮。

一是添加更多文件。 (.btn-plus)一是把添加的去掉。 (.btn-减号)一是重置文件。 (.btn-reset)

我可以使用 (.btn-plus) 按钮添加更多输入。

如何才能仅删除我使用 (.btn-plus) 添加的每个输入中单击的那个？

$(".btn-plus").click(function(){
    $('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
    return false;
})


$(".btn-minus").click(function(){
      $(this).nextUntil('li').remove()
})


$(".btn-reset").click(function(){
      $(".board-box__attachments input").value = "";
})

li {
  width : 60%;
  background : lightblue;
  list-style : none;
  padding : 0.5em;
  border-bottom : 1px solid white;
}

.th { 
  width : 100px;
  float: left;
}

.td {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">

  <li>
    <div class="th">files</div>
    <div class="td">
      <input type="file">
      <button class="btn btn-plus"> + </button>
      <button class="btn-reset">Reset</button>
    </div>
  </li>

</ul>

Answer 1

您必须使用on() 将事件附加到动态添加的元素。然后使用 closest() 查找当前单击元素的父元素。

$("body").on("click", ".btn-minus", function(){
      $(this).closest('li').remove();
})