В 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/