投稿获客
  1. 创想鸟首页
  2. web前端

JavaScript中通过类名高效移除DOM元素：以表格行为例

程序猿 • • web前端 • 阅读 0

JavaScript中通过类名高效移除DOM元素：以表格行为例

本教程将深入探讨如何在javascript中高效地通过元素的类名移除dom元素，特别是针对动态生成的表格行。我们将分析传统的`removechild`方法及其在特定场景下的考量，并重点推荐使用现代、简洁的`element.prototype.remove()`方法，同时提供完整的代码示例和dom操作的最佳实践，确保web应用的性能与可维护性。

在Web开发中，动态管理DOM元素是常见的需求，例如在数据列表、购物车或配置界面中添加、修改或删除条目。本文将以一个具体的表格操作场景为例，详细讲解如何通过元素的类名来高效移除DOM元素。

1. HTML结构与初始数据加载

首先，我们来看一个典型的HTML表格结构，其中包含一个用于承载动态内容的

元素：

接下来，假设我们有一些数据需要展示在表格中。以下JavaScript代码演示了如何使用innerHTML属性来动态添加表格的头部和数据行：

// 假设 showStuff 是一个包含待显示数据的数组// 例如：const showStuff = [["Item A", 10, 2], ["Item B", 5, 3]];const stuffCarrier = document.getElementById("stuffCarrier");// 添加表格头部stuffCarrier.innerHTML = `    数量    物品    成本`;// 遍历数据并添加表格数据行showStuff.forEach(e => {    // 为每个数据行添加 'removeds' 类，以便后续移除    stuffCarrier.innerHTML += `        ${e[2]}        ${e[0]}        ${e[1] * e[2]}    `;});// 同时更新 localStorage，以保持数据持久化// localStorage.setItem("CarriedStuff", JSON.stringify(showStuff));

在上述代码中，我们为每个数据行添加了一个特定的类名removeds。这个类名将作为我们后续选择和移除这些行的关键标识。

立即学习“Java免费学习笔记（深入）”；

2. 移除元素的挑战：理解removeChild与父子关系

当需要移除这些动态添加的表格行时，一个常见的尝试是使用Node.removeChild()方法。这个方法要求我们通过父元素来移除其子元素。例如，如果我们要移除stuffCarrier（

）中的某个

子元素，代码可能如下所示：

document.getElementById("clearList").onclick = function () {    // 获取所有带有 'removeds' 类的元素    Array.from(document.getElementsByClassName("removeds")).forEach((e, i, arr) => {        // 尝试通过父元素 stuffCarrier 移除子元素 e        document.getElementById("stuffCarrier").removeChild(e);        console.log(i, e, e.parentElement, arr); // 调试信息    });    // 同步移除 localStorage 中的数据    localStorage.removeItem("CarriedStuff");};

在上述代码中，开发者可能会遇到一个疑问：“我的tr似乎不以tbody为父元素”。实际上，当使用innerHTML +=添加HTML字符串时，浏览器会解析该字符串并创建相应的DOM元素。这些

元素在被添加到

后，会正确地成为

的直接子元素。因此，理论上document.getElementById(“stuffCarrier”).removeChild(e);是可行的。然而，这种方式需要显式地获取父元素，并在每次循环中调用它，对于批量操作而言，可能不是最简洁或最直观的方法。

酷表ChatExcel 酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

酷表ChatExcel 48 查看详情 酷表ChatExcel

3. 现代且高效的解决方案：Element.prototype.remove()

JavaScript提供了一个更现代、更简洁的方法来移除DOM元素：Element.prototype.remove()。这个方法允许元素直接从其父节点中移除自身，无需显式引用父节点。这大大简化了代码，并提高了可读性。

使用Element.prototype.remove()方法来清空所有带有removeds类的表格行的代码如下：

document.getElementById("clearList").onclick = function () {    // 获取所有带有 'removeds' 类的元素，并直接调用其 remove() 方法    Array.from(document.getElementsByClassName("removeds")).forEach(d => d.remove());    // 同步移除 localStorage 中的数据    localStorage.removeItem("CarriedStuff");};

这段代码首先通过document.getElementsByClassName(“removeds”)获取到一个HTMLCollection，然后使用Array.from()将其转换为一个真正的数组，以便可以使用forEach方法进行迭代。在每次迭代中，直接调用当前元素的remove()方法，即可将其从DOM中移除。这种方式不仅代码量更少，而且逻辑更清晰。

4. 完整代码示例

为了更好地理解，以下是一个整合了HTML、添加和移除逻辑的完整示例：

            动态表格行移除示例            body { font-family: Arial, sans-serif; background-color: #222; color: #eee; }        table { width: 80%; margin: 20px auto; border-collapse: collapse; }        th, td { border: 1px solid #444; padding: 8px; text-align: left; }        th { background-color: #333; color: white; }        td { background-color: #2b2b2b; }        button { display: block; margin: 20px auto; padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 5px; }        button:hover { background-color: #c82333; }        
商品列表
    
                                
                // 示例数据        const initialStuff = [            ["键盘", 120, 2],            ["鼠标", 80, 1],            ["显示器", 800, 1],            ["耳机", 150, 3]        ];        const stuffCarrier = document.getElementById("stuffCarrier");        const clearListButton = document.getElementById("clearList");        function loadItems() {            // 从 localStorage 加载数据，如果没有则使用初始数据            let showStuff = JSON.parse(localStorage.getItem("CarriedStuff")) || initialStuff;            // 清空现有内容（如果存在）            stuffCarrier.innerHTML = '';            // 添加表格头部            stuffCarrier.innerHTML += `                数量                物品                成本            `;            // 遍历数据并添加表格数据行            showStuff.forEach(e => {                stuffCarrier.innerHTML += `                    ${e[2]}                    ${e[0]}                    ${e[1] * e[2]}                `;            });            // 将当前数据保存到 localStorage            localStorage.setItem("CarriedStuff", JSON.stringify(showStuff));        }        // 页面加载时加载数据        document.addEventListener('DOMContentLoaded', loadItems);        // 清空列表按钮的事件监听器        clearListButton.onclick = function () {            // 使用 Element.prototype.remove() 移除所有带有 'removeds' 类的行            Array.from(document.getElementsByClassName("removeds")).forEach(d => d.remove());            // 同步移除 localStorage 中的数据            localStorage.removeItem("CarriedStuff");            console.log("列表已清空，localStorage 数据已移除。");            // 重新加载头部行（如果需要）            // stuffCarrier.innerHTML = `数量物品成本`;        };

5. DOM操作的最佳实践与注意事项

虽然innerHTML +=在某些简单场景下很方便，但对于复杂的或频繁的DOM操作，存在一些性能和安全上的考量。以下是一些DOM操作的最佳实践：

使用document.createElement()和appendChild()进行元素添加：频繁使用innerHTML +=会导致浏览器重新解析整个innerHTML字符串，并重新构建DOM，这在性能上开销较大。更推荐的做法是使用document.createElement()创建新元素，然后通过appendChild()将其添加到DOM中。这种方式直接操作DOM节点，效率更高。

// 优化后的添加元素方式示例function addItem(itemData) {    const tr = document.createElement('tr');    tr.classList.add('stuffs', 'removeds'); // 添加类名    const tdQuantity = document.createElement('td');    tdQuantity.textContent = itemData[2];    tr.appendChild(tdQuantity);    const tdStuff = document.createElement('td');    tdStuff.style.color = 'blue';    tdStuff.textContent = itemData[0];    tr.appendChild(tdStuff);    const tdCost = document.createElement('td');    tdCost.style.color = 'white';    tdCost.textContent = itemData[1] * itemData[2];    tr.appendChild(tdCost);    stuffCarrier.appendChild(tr);}// 遍历数据并添加表格数据行// showStuff.forEach(addItem);

使用DocumentFragment进行批量添加：当需要添加大量元素时，每次appendChild()都会触发浏览器的重绘和回流。为了提高性能，可以先将所有新元素添加到DocumentFragment（文档片段）中，然后一次性将整个文档片段添加到DOM中。

// 使用 DocumentFragment 批量添加const fragment = document.createDocumentFragment();showStuff.forEach(itemData => {    const tr = document.createElement('tr');    // ... 创建并添加 td 元素到 tr ...    fragment.appendChild(tr);});stuffCarrier.appendChild(fragment); // 一次性添加到 DOM

Element.prototype.remove()是首选的移除方法：如前所述，element.remove()是移除单个元素的最佳实践，它简洁、直观且无需父元素引用。

同步localStorage数据：在添加或移除DOM元素时，如果这些数据来源于localStorage或需要持久化到localStorage，务必同步更新localStorage中的数据，以确保DOM状态和持久化数据的一致性。

事件监听器的管理：当元素从DOM中移除时，其上绑定的事件监听器通常也会被垃圾回收器自动处理，无需手动移除。

总结

通过本教程，我们了解了在JavaScript中通过类名移除DOM元素的不同方法。相较于需要显式父元素引用的removeChild()，现代的Element.prototype.remove()方法提供了更简洁、更高效的解决方案，特别适用于批量移除具有特定类名的元素。同时，掌握createElement()、appendChild()和DocumentFragment等DOM操作最佳实践，能够帮助我们构建高性能、可维护的Web应用程序。在实际开发中，始终优先考虑这些优化策略，以提供流畅的用户体验。

以上就是JavaScript中通过类名高效移除DOM元素：以表格行为例的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/582646.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

271.8K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年11月10日 11:35:18
下一篇 2025年11月10日 11:36:44

相关推荐

  • 欧意okx交易所官网下载地址是什么 好文分享

    欧意okx交易所官网下载地址是什么

    欧意okx是全球领先的数字资产交易平台，为全球用户提供广泛的数字资产交易及相关服务。平台致力于提供安全、稳定、高效的交易体验，覆盖多种加密货币交易对和衍生品。 欧意官网直达： 详细介绍欧意OKX交易所 欧意OKX作为全球知名的数字资产服务平台，拥有庞大的用户基础和卓越的技术实力。平台支持现货交易、杠…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • ok交易所官网下载地址是什么 好文分享

    ok交易所官网下载地址是什么

    okx是全球知名的加密资产交易平台之一，致力于为用户提供安全、便捷、高效的数字资产交易及相关服务。平台支持多种加密货币的现货、杠杆、合约、期权等交易产品，拥有强大的技术基础设施和良好的市场流动性。okx注重用户资产安全，采用多层次安全防护措施，服务全球广泛的用户群体。 官方下载地址： OKX交易所 …

    程序猿的头像 程序猿
    2025年12月8日
    000

  • 币安Binance官网地址 轻松找到官方入口不踩坑

    币安（Binance）是全球领先的加密货币交易平台之一，为用户提供广泛的数字资产交易及相关服务。本文将为您详细介绍如何在币安官网上完成注册流程，帮助您轻松开启加密货币之旅。为了保障您的资产安全，建议您通过本文提供的官方页面链接直接跳转至币安官方首页，避免访问虚假网站。 访问币安官网 开始注册的第一步…

    程序猿的头像 程序猿
    2025年12月8日 • 好文分享
    000
  • 2025年加密货币交易所全方位对比 欧意、币安、火币 好文分享

    2025年加密货币交易所全方位对比 欧意、币安、火币

    展望2025年，加密货币市场持续演进，为全球投资者提供了丰富的数字资产交易机会。选择一个合适的交易平台是参与这一市场的关键一步。不同的交易所拥有各自的特点、优势以及服务侧重点，理解这些差异对于用户制定交易策略和保障资产安全至关重要。 欧意 (OKX) 欧意，作为全球领先的加密资产服务平台之一，起源于…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • ok交易所怎么提币？ok交易所提币详细教程 好文分享

    ok交易所怎么提币？ok交易所提币详细教程

    在数字资产交易日益普及的今天，理解如何安全有效地取出自己的数字资产显得尤为重要。ok交易所作为全球知名的数字资产交易平台，提供了便捷的提币服务。本教程将详细解析在ok交易所进行提币操作的步骤、需要注意的事项以及一些常见的疑问解答，帮助用户顺利完成资产转移，确保资产安全。无论您是初次使用ok交易所提币…

    程序猿的头像 程序猿
    2025年12月8日
    000

  • 芝麻开门Gate.io官网地址

    本文将为您详细介绍如何在芝麻开门Gate.io平台进行注册。Gate.io是全球领先的数字资产交易平台之一，提供多种加密货币的交易服务。通过本文，您可以了解到官方的注册流程，并提供官方页面的链接，方便您直接点击前往Gate.io官方网站进行操作。 Gate.io平台简介与注册入口 Gate.io平台…

    程序猿的头像 程序猿
    2025年12月8日 • 好文分享
    000
  • 【新手必看】币安、欧易、火币区别全解析 好文分享

    【新手必看】币安、欧易、火币区别全解析

    在数字资产交易领域，选择一个合适的平台对于用户而言至关重要。目前市场上存在众多交易平台，其中一些平台因其规模、用户基础和提供的服务而受到广泛关注。了解不同平台之间的差异，能够帮助用户根据自身需求做出明智的决策。 币安 币安作为全球领先的数字资产交易平台之一，以其庞大的交易量和广泛的用户分布闻名。该平…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • Tezos（XTZ）自升级区块链：新手如何参与治理 好文分享

    Tezos（XTZ）自升级区块链：新手如何参与治理

    Tezos（XTZ）是一个独特且具有前瞻性的区块链平台，其核心特性在于链上自我升级机制。这意味着Tezos协议本身可以通过社区的治理投票进行迭代和改进，而无需进行硬分叉。本文旨在介绍Tezos的这一特性，并详细阐述作为新手用户如何通过简单的方式参与到Tezos的治理过程中，特别是侧重于对普通用户友好…

    程序猿的头像 程序猿
    2025年12月8日
    000

  • 欧易app下载最新官方版2025

    要下载欧易App，请先访问官网，点击右上角“登录”，输入账户信息并登录。欧易具有用户友好界面、广泛交易对、高级交易功能、实时市场数据、移动设备兼容及多语言支持。安全使用建议包括：1. 从官方渠道下载更新App；2. 登录后启用多种安全验证方式；3. 定期检查账户活动记录；4. 保护设备安全并避免不安…

    程序猿的头像 程序猿
    2025年12月8日 • 好文分享
    000
  • 币圈合约交割是啥？交割会强制平仓吗？ 好文分享

    币圈合约交割是啥？交割会强制平仓吗？

    binance币安交易所 注册入口： APP下载： 欧易OKX交易所 注册入口： APP下载： 火币交易所： 注册入口： APP下载： 在币圈，合约交易是一种常见的派生品交易方式。它允许交易者在不实际持有基础加密货币的情况下，对未来某个时间点或价格进行投机或对冲。合约有不同的类型，其中一种就是带有明…

    程序猿的头像 程序猿
    2025年12月8日
    000

  • 区块链交易平台TOP10最新 2025年数字货币交易所榜单

    数字货币交易平台在全球金融格局中扮演着至关重要的角色，为用户提供了参与区块链资产市场的通道。这些平台的功能多种多样，涵盖了基础的币币交易到复杂的衍生品交易，满足了不同类型投资者的需求。选择一个合适的交易平台，通常需要考量其安全性、流动性、交易费用、支持的币种数量以及用户体验等多个维度。一份关于领先平…

    程序猿的头像 程序猿
    2025年12月8日 • 好文分享
    000
  • 欧意okx交易所app官网v6.125.1安装免费注册入口 好文分享

    欧意okx交易所app官网v6.125.1安装免费注册入口

    欧意OKX交易所App官方v6.125.1下载安装与免费注册指南 官方App下载方法 获取欧意okx交易所官方app v6.125.1非常简单。请直接点击下方的官方下载链接。点击链接后，下载过程通常会自动开始。为了您的账户和资产安全，推荐始终通过官方渠道获取app，避免使用第三方不明来源的链接或文件…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • OKX欧易区块链交易查询官网入口2025直接进 好文分享

    OKX欧易区块链交易查询官网入口2025直接进

    欧意OKX交易所App官方v6.125.1下载安装与免费注册指南 在OKX上查询区块链交易的步骤 1、访问官方网站：使用安全浏览器导航到 。    2、登录或注册：使用您的 OKX 账户凭证登录。如果您是新用户，请使用电子邮件或电话验证完成注册过程。     3、访问交易查询：          转…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • Pepe mania：鲸鱼买和模因硬币狂热 好文分享

    Pepe mania：鲸鱼买和模因硬币狂热

    随着鲸鱼展开行动并准备升温，用pepe、apork和bitcoin pepe一起进入模因币的狂野世界。这是加密货币的未来，还是一时的潮流？ 佩佩热潮：鲸鱼买入与模因币狂潮 模因币市场从不停歇，最近，佩佩及其青蛙家族成员再度引发热议。凭借鲸鱼活动和创新社区建设策略，这些代币正掀起一波热潮。让我们深入看…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • 必安交易所官方版本 必安app安卓正式版 好文分享

    必安交易所官方版本 必安app安卓正式版

    必安交易所官方版本是由必安直接发布和运营的交易平台及软件，其核心在于确保用户使用的是通过官方网站或授权渠道访问的平台，以保障资金与信息安全。1. 官方版本提供现货、合约、期权等多种交易服务，并集成资产管理、新币申购等增值服务；2. 必安app安卓正式版支持多种交易类型、专业分析工具、账户管理及多金融…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • 火币官网登录 火币htx官网登录入口 好文分享

    火币官网登录 火币htx官网登录入口

    htx是一家知名的全球性数字资产交易平台，致力于为用户提供一站式的数字资产交易服务。该平台支持多种加密货币的交易，包括主流币种以及各种新兴的数字资产。凭借多年的运营经验和持续的技术创新，htx已在全球范围内建立了广泛的用户基础，并以其流动性、安全性以及丰富的交易产品而受到用户的关注。平台提供了包括现…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • 币安2024老版本下载地址-币安app老版本下载地址 好文分享

    币安2024老版本下载地址-币安app老版本下载地址

    “币安2024老版本下载地址”这个搜索词汇的出现，并非简单的技术查询，它背后揭示了加密资产交易领域中一个有趣的用户分化现象。当大部分应用程序开发者与用户都在追逐最新、功能最全的版本时，一部分用户却在主动寻找“过去”。这个行为本身就值得探究，它代表了一种基于个人习惯、设备性能以及交易哲学的自主选择。这…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • 欧意官网登录 欧意okx官网登录入口 好文分享

    欧意官网登录 欧意okx官网登录入口

    欧意okx是全球知名的加密数字资产交易平台，为用户提供广泛的交易服务，包括现货、合约、期权等。它致力于为用户提供安全、高效、便捷的数字资产交易体验。 欧意官网直达： 欧意官方app： 欧意OKX详细介绍 欧意OKX作为一个综合性的加密资产服务平台，其服务涵盖了从基础的现货交易到复杂的衍生品交易。平台…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • ios交易USDT.官方网址.币安 好文分享

    ios交易USDT.官方网址.币安

    币安 (binance) 是全球领先的加密货币交易平台之一，提供广泛的数字资产交易对以及丰富多样的金融服务。无论您是新手还是经验丰富的交易者，币安都致力于为您提供安全、便捷、高效的交易体验。本文将指导您如何下载和安装币安官方应用程序，轻松开启您的数字资产投资之旅。本文提供官方app下载链接，点击本文…

    程序猿的头像 程序猿
    2025年12月8日
    000
  • 欧易交易平台最新网址 好文分享

    欧易交易平台最新网址

    欧易（okx）是一款全球领先的数字资产交易平台，为用户提供多种数字资产的交易及投资服务。它以其丰富的交易对、强大的风控系统和流畅的用户体验而受到广大用户的信赖。本文将为您提供欧易官方app的最新下载链接和详细的安装指南，您只需点击本文中提供的下载链接，即可轻松获取官方应用。 下载教程 首先，请点击下…

    程序猿的头像 程序猿
    2025年12月8日
    000

发表回复

登录后才能评论
关注微信