In JQuery how can I remove a li element by only clicking on the button and not the whole element?

Question

In JQuery how can I remove a li element by only clicking on the button and not the whole element?

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>

This is where I am having a problem. It removes the item even when I click on the li element I only want it to remove when the button is clicked.

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

Answer 1

When you click on a button inside a

tag, we need to remove that whole tag . Please find the following solution

HTML is:

    <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 is:

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

I have also created a fiddle for this : https://jsfiddle.net/hzobs5fr/1/

Upvotes: 0

Answer 2

The issue is because you're providing a jQuery object as the delegated target for the on() event handler. This should be a string selector instead. Try this:

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

Also note that in several places you are double-wrapping your jQuery objects, which should be avoided. Here's a corrected working example:

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>