我想在單擊時洗掉多個按鈕，而不是一鍵洗掉

我設法用 <li>element洗掉按鈕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>

uj5u.com熱心網友回復：

在我開發的解決方案中，所有應用<button>了類樣式的元素都使用回圈.deleteBtn從頁面中洗掉。forEach單擊此方法中的任何現有<button>元素將導致所有<button>元素被洗掉。

var container = document.querySelector('#shopping_list__items');
var buttons = document.querySelectorAll(".deleteBtn");

/* This method removes all button elements with class ".deleteBtn". */
function DeleteAllButton(){
    buttons.forEach(buttonElement => {
      buttonElement.remove();
  });
}

container.addEventListener("click", DeleteAllButton);

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

uj5u.com熱心網友回復：

根據您的 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>

標籤：

上一篇：如何在空陣列上呼叫reduce并分配新屬性

下一篇：如何在HTML的同一頁面上制作多個幻燈片？