Javascript-如何使用單擊事件和類刪除DOM元素？

Question

我在使用parentNode.removeChild()時遇到了一些困難。 我在無序列表中有一個“項目”列表，每個項目都有自己的刪除按鈕。 我正在嘗試將click事件綁定到每個單獨的按鈕，這將刪除它各自的父項“ item”。

到目前為止，我的代碼：

<ul class="list">
  <h2>This is a list</h2>
  <li class="item">
    <h3>Some Item</h3>
    <button class="delete">Delete</div>
  </li>
  <li class="item">
    <h3>Some Item</h3>
    <button class="delete">Delete</div>
  </li>
  <li class="item">
    <h3>Some Item</h3>
    <button class="delete">Delete</div>
  </li> 
</ul>

var childElements = document.getElementsByClassName('item');
var buttonElement = document.getElementsByClassName('delete');

function deleteItem(buttonsClass, childClass) {
  for (var i=0;i<buttonsClass.length;i++) {
    var child = childClass[i];
    buttonsClass[i].addEventListener('click', function(child) {
       childClass[i].parentNode.removeChild(childClass[i]);
    }, false);
  }    
}

deleteItem(buttonElement, childElements);

我知道有一種使用jQuery的簡便方法，但我真的想用普通的javascript解決此問題。 感謝您提供的所有幫助。

Answer 1

問題是單擊元素時調用的childClass[i]定義函數時的期望值。 您應該使用event.target來捕獲單擊的元素

var childElements = document.getElementsByClassName('item');
var buttonElement = document.getElementsByClassName('delete');

var _handler = function(e) {
     e.target.parentNode.parentNode.removeChild(e.target.parentNode);
}

function deleteItem(buttonsClass, childClass) {
  for (var i=0;i<buttonsClass.length;i++) {
    buttonsClass[i].addEventListener('click', _handler, false);
  }    
}

deleteItem(buttonElement, childElements);

-編輯-

如果要使用原始方法，則可以通過以下方式解決：

function deleteItem(buttonsClass, childClass) {
  for (var i=0;i<buttonsClass.length;i++) {
    (function(child) {
        buttonsClass[i].addEventListener('click', function(e) {
           child.parentNode.removeChild(child);
        }, false);
    })(childClass[i]);
  }    
}

使用封裝(function(encapsulatedChild) { })(child)您可以將child的值存儲在下一個周期不變的上下文中。

Answer 2

看起來您想綁定一個click事件以刪除按鈕，並在該事件上刪除該項目。

您需要獲取子類的各個buttonsClass元素。

function deleteItem( childElements ) 
{
   Array.prototype.slice.call( childElements ).forEach( function( item ){
      var deleteChildren = item.getElementsByClassName( "delete" );
      Array.prototype.slice.call( deleteChildren ).forEach( function( deleteBtn ){
        deleteBtn.addEventListener('click', function() 
        {
            this.parentNode.removeChild( this );
        }, false);        
      });
   });
}

甚至更簡單地講，只需單擊要刪除的父item上的按鈕列表即可

function deleteItem( buttonElement ) 
{
   Array.prototype.slice.call( buttonElement ).forEach( function( button ){
        button.addEventListener('click', function() 
        {
            this.parentNode.removeChild( this );
        }, false);        
   });
}

Answer 3

這是事件委托的完美案例。 完全不需要jQuery：

(function(window, htmlElement) {

    'use strict';

    htmlElement.addEventListener("click", handleClick, false);

    function handleClick(event) {
        if (event.target.classList.contains("delete")) {
            event.preventDefault();
            removeItem(event.target);
        }
    }

    function removeItem(button) {
        var item = getItem(button),
            confirmMessage;

        if (item) {
            confirmMessage = item.getAttribute("data-confirm");

            if (!confirmMessage || window.confirm(confirmMessage)) {
                item.parentNode.removeChild(item);
            }
        }
        else {
            throw new Error("No item found");
        }
    }

    function getItem(button) {
        var element = button.parentNode,
            item = null;

        while (element) {
            if (element.nodeName === "LI" || element.nodeName === "TR") {
                item = element;
                break;
            }

            element = element.parentNode;
        }

        return item;
    }

})(this, this.document.documentElement);

無論您有多少個刪除按鈕，您都可以在整個頁面上使用一個單擊處理程序。 這也適用於列表項或表行，並且通過在按鈕上指定data-confirm屬性，它將在刪除之前彈出一個確認框。

<button type="button" class="delete"
        data-confirm="Are you sure you want to delete this item?">
    Delete
</button>

您還可以輕松更改此設置，以便它使用另一個屬性來找到刪除按鈕：

<button type="button" class="delete"
        data-delete
        data-confirm="...">
    Delete
</button>

只需將handleClick函數中if語句的條件更改為：

if (event.target.hasAttribute("data-delete")) {
    event.preventDefault();
    removeItem(event.target);
}

這使您的行為與樣式脫鈎。 您可以將delete類名用於樣式設置，並將data-delete屬性用於JavaScript行為。 如果由於某種原因需要更改CSS delete類的名稱或使用其他類，因為您決定使用Bootstrap之類的第三方CSS框架，則無需更改一行JavaScript。

這里的最后一個優點是單擊處理程序附加到document.documentElement對象，該對象在JavaScript開始執行並表示<html>元素時可用。 不需要jQuery的文檔就緒事件處理程序。 只需附加點擊處理程序，然后在頁面上的任意位置導入腳本即可。