我想一键删除多个按钮而不是一键删除答案

【问题标题】：I want to delete multipale button on click onebyone not delete it all by one click我想一键删除多个按钮而不是一键删除
【发布时间】：2022-01-14 12:01:05
【问题描述】：

我设法删除带有<li> 元素class li_listItem" 的按钮。但我的目标是点击删除<button> 本身以及<li> 元素。现在我只能通过单击它来删除这两个元素。你能帮我吗？

var ul = document.querySelector('#shopping_list__items');

function DeleteButtonOnclick(e) {
  const trgt = e.target.closest('.deleteBtn, .li_listItem');
  if (trgt) trgt.remove();
}

ul.addEventListener("click", DeleteButtonOnclick);

<ul id="shopping_list__items">
  <div class="flex">
    <li class="li_listItem" random="23">Notebook</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Jello</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Spinach</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Rice</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Birthday Cake</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Candles</li>
    <button class="deleteBtn">Delete Button</button>
  </div>
</ul>

【问题讨论】：

标签： javascript html click addeventlistener

【解决方案1】：

当应用deleteBtn类样式的元素被点击时，我使用this.parentNode.remove()方法删除了<li>元素和里面的<button>元素。

var elements = document.getElementsByClassName("deleteBtn");

var removeSelectedElement = function() {
    this.parentNode.remove();
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', removeSelectedElement, false);
}

<ul id="shopping_list__items">
  <div class="flex">
    <li class="li_listItem" random="23">Notebook</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Jello</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Spinach</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Rice</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Birthday Cake</li>
    <button class="deleteBtn">Delete Button</button>
  </div>

  <div class="flex">
    <li class="li_listItem">Candles</li>
    <button class="deleteBtn">Delete Button</button>
  </div>
</ul>

【讨论】：

是的，我可以，但我的目标只是点击按钮，删除“按钮”本身以及“li”元素......但我不希望点击 li 被删除或删除按钮，我只想在你点击删除按钮时采取行动。
@Abu_101 我更新了这个答案，因为我误解了这个问题。它完全符合您的要求。此代码与 DeFRaNDo 的答案相同。
对不起，它没有，当你点击整个 flex 容器时，它会删除这两个元素，不管你点击 li 元素还是 button 元素，它都会删除它。我想在“按钮”上单击删除两者，但在单击 li 元素时不想执行任何操作....我希望单击删除 1）按钮本身和 2）仅以这种方式删除 li 元素。我对 li 元素还有其他计划。
@Abu_101 好的，现在我明白了:)。我编辑了代码。
感谢您的帮助，感谢 :)

【解决方案2】：

根据您的 html 结构，最简单的方法是删除按钮的父级。（希望我没有误解你想要做什么。）

$(".deleteBtn").click(function(){
        $(this).parent().remove();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<ul id="shopping_list__items">
            <div class="flex">
              <li class="li_listItem" random="23">Notebook</li>
              <button class="deleteBtn">Delete Button</button>
            </div>

            <div class="flex">
              <li class="li_listItem">Jello</li>
              <button class="deleteBtn">Delete Button</button>
            </div>

            <div class="flex">
              <li class="li_listItem">Spinach</li>
              <button class="deleteBtn">Delete Button</button>
            </div>

            <div class="flex">
              <li class="li_listItem">Rice</li>
              <button class="deleteBtn">Delete Button</button>
            </div>

            <div class="flex">
              <li class="li_listItem">Birthday Cake</li>
              <button class="deleteBtn">Delete Button</button>
            </div>

            <div class="flex">
              <li class="li_listItem">Candles</li>
              <button class="deleteBtn">Delete Button</button>
            </div>
          </ul>

【讨论】：

这正是我想要的，但没有 jquery，（我还不知道 jquery），但我的任务是只用 Javascript 来做......
最简单的解决方案。
是的，但据我了解，它只会删除按钮，而不是 li 元素，对吗？抱歉，也许我没有很好地解释我想要的是什么：我想在“按钮”上单击删除两个元素，但是当我单击 li 元素时不想执行任何操作....我想单击删除 1) 按钮本身和 2) li 元素只能这样。我对 li 元素还有其他计划。