javascript - jQuery 元素移除

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 动态创建。我想通过单击 deleteBtn 删除特定 listItem 的 amountInput，所以我尝试这样做:

$("#listContainer").on("click", ".deleteBtn", function() {
    $(this).closest(".amountInput").remove();
});

这行不通。但另一方面，如果我尝试删除整个 listItem ，则代码有效:

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

为什么会发生这种情况？

谢谢。

Answer 1

因为 .closest 传播到 HTML 的顶部。因此它会搜索第一个与您的选择器匹配的父级。这就是为什么它找不到 .amountInput。因为它不是您的按钮的父级。

要获取.amountInput，您必须:

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

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