问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Javascript - 如何使用点击事件和类删除 DOM 元素？

社区维基
1
新手上路，请多包涵

我在使用 parentNode.removeChild() 时遇到一些困难。我有一个无序列表中的“项目”列表，每个项目都有自己的删除按钮。我正在尝试将点击事件绑定到每个单独的按钮，这将删除它各自的父“项目”。

到目前为止我的代码：

 <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 来解决这个问题。感谢您提供的所有帮助。

原文由 Frederick M. Rogers 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptfor-loopaddeventlistenerremovechild
阅读 501
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这是 事件委托 的完美案例。根本不需要 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 样式类名称，以及 JavaScript 行为的 data-delete 属性。如果您出于任何原因需要更改 CSS 删除类的名称，或者使用不同的类，因为您决定使用像 Bootstrap 这样的第三方 CSS 框架，那么您不需要更改一行 JavaScript。

这里的最后一个优点是点击处理程序附加到 document.documentElement 对象，它在 JavaScript 开始执行时可用，代表 <html> 元素。不需要 jQuery 的文档就绪事件处理程序。只需附加点击处理程序并在页面上的任何位置导入脚本。

原文由 Greg Burghardt 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
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 的值存储在下一个循环期间不会改变的上下文中。

原文由 Luca Rainone 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题