我想一个一个地删除多个按钮，而不是一键删除所有按钮

Question

我设法删除了带有 <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>

Answer 1

我使用this.parentNode.remove()方法同时删除了<li>元素和<button>元素，当deleteBtnclass样式的元素是单击已应用。

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>

Answer 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>

我想一个一个地删除多个按钮，而不是一键删除所有按钮

I want to delete multipale button on click onebyone not delete it all by one click

html

javascript

click

addeventlistener