Question

我想使用jQuery删除元素。

HTML：

 <div class="listContainer" id="listContainer">
        <div class="listItem">
          <div class="name">
            Item Name
          </div>
          <div class="amount">
            <input type="text" class="amountInput" />
          </div>
          <div class="delete">
            <div class="deleteBtn">
              X
            </div>
          </div>
        </div>
      </div>

页面上有多个listItems，每个listItem都将使用jQuery动态创建。我想通过单击amountInput来删除特定listItem的{{1}}，所以我尝试做：

deleteBtn

这不起作用。但是另一方面，如果我尝试整体删除$("#listContainer").on("click", ".deleteBtn", function() { $(this).closest(".amountInput").remove(); });，则代码可以正常工作：

listItem

为什么会这样？

谢谢。

Answer 1

因为.closest传播到HTML的顶部。因此，它将搜索与您的选择器匹配的第一个父对象。这就是为什么它找不到。ammountInput的原因。因为它不是您按钮的父项。

要获得.ammountInput，您必须：

$("#listContainer").on("click", ".deleteBtn", function() {
    $(this).closest(".listItem").find('.ammountInput').remove();
});

这将获取包装的.listItem元素，然后在其中搜索.ammountInput元素。

Answer 2

您的选择器不正确，在这种情况下，使用find而不是close可能会有所帮助，示例中的$（this）也与deleteBtn类有关，而不与listContainer有关。

$("#listContainer").on("click", ".deleteBtn", function() {
console.log($(this)) // this here is .deleteBtn not listContainer
 $(this).closest(".listItem").find(".amountInput").remove();   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listContainer" id="listContainer">
        <div class="listItem">
          <div class="name">
            Item Name
          </div>
          <div class="amount">
            <input type="text" class="amountInput" />
          </div>
          <div class="delete">
            <div class="deleteBtn">
              X
            </div>
          </div>
        </div>
      </div>

jQuery元素删除

2 个答案: