在 JQuery 中，如何仅通过单击按钮而不是整个元素来删除 li 元素？

Question

在 JQuery 中，如何仅通过单击按钮而不是整个元素来删除 li 元素？

 let addGroupBtn = $(".add-group-btn"); let createGroupList = $(".create-group-list"); let createGroupsContainer = $(".create-groups-container"); let createGroupName = $(".create-group-name"); let removeGroupItemBtn = $(".remove-group-item-btn"); addGroupBtn.click((e) => { e.preventDefault(); let createGroupNameValue = createGroupName.val() if ($.trim(createGroupNameValue) != '') { createGroupList.append(`<li class="list-group-item" data-group="list-item"> <div class="input-group"> <input type="text" class="form-control" value="${createGroupNameValue}"> <div > <button class="btn btn-danger remove-group-item-btn" data-group="remove-btn" type="button"><i class="fas fa-times"></i> Remove</button> </div> </div> </li>`); createGroupName.val(""); }; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--The button that creates the group--> <button class="btn btn-primary add-group-btn" data-group="add-btn" type="button"><i class="fas fa-plus"></i> Add group</button> <div class="create-groups-container"> <ul class="list-group create-group-list my-2"></ul> </div>

这是我遇到问题的地方。 即使我单击 li 元素，它也会删除该项目我只希望在单击按钮时将其删除。

$(createGroupsContainer).on('click', removeGroupItemBtn, (e) => {
  $(e.target).closest('li').remove();
});

Answer 1

问题是因为您提供了一个 jQuery 对象作为on()事件处理程序的委托目标。 这应该是一个字符串选择器。 尝试这个：

$(createGroupsContainer).on('click', ".remove-group-item-btn", (e) => {
  $(e.target).closest('li').remove();
});

另请注意，在一些地方，您要对 jQuery 对象进行双重包装，这是应该避免的。 这是一个更正的工作示例：

 let $addGroupBtn = $(".add-group-btn"); let $createGroupList = $(".create-group-list"); let $createGroupsContainer = $(".create-groups-container"); let $createGroupName = $(".create-group-name"); let $removeGroupItemBtn = $(".remove-group-item-btn"); $addGroupBtn.click((e) => { e.preventDefault(); let createGroupNameValue = $createGroupName.val() if ($.trim(createGroupNameValue) != '') { $createGroupList.append(`<li class="list-group-item" data-group="list-item"> <div class="input-group"> <input type="text" class="form-control" value="${createGroupNameValue}"> <div > <button class="btn btn-danger remove-group-item-btn" data-group="remove-btn" type="button"><i class="fas fa-times"></i> Remove</button> </div> </div> </li>`); $createGroupName.val(""); }; }); $createGroupsContainer.on('click', ".remove-group-item-btn", (e) => { $(e.target).closest('li').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="create-group-name" /> <button class="btn btn-primary add-group-btn" data-group="add-btn" type="button"><i class="fas fa-plus"></i> Add group</button> <div class="create-groups-container"> <ul class="list-group create-group-list my-2"></ul> </div>

Answer 2

当你点击一个里面的按钮

标签，我们需要删除整个标签。 请找到以下解决方案

HTML是：

 <ul> <li> <section> <div class=""> <p>Sample text here and some more here 1</p> <button class="remove">Remove</button> </div> </section> </li> <li> <section> <div class=""> <p>Sample text here and some more here 2</p> <button class="remove">Remove</button> </div> </section> </li> <li> <section> <div class=""> <p>Sample text here and some more here 3</p> <button class="remove">Remove</button> </div> </section> </li> <li> <section> <div class=""> <p>Sample text here and some more here 4</p> <button class="remove">Remove</button> </div> </section> </li> </ul>

JQuery 是：

 // handle click and add remove Li $(".remove").on("click", function(){ $(this).parents("li").remove(); })

我还为此创建了一个小提琴： https : //jsfiddle.net/hzobs5fr/1/