vue中删除dom元素节点实现过程
更新时间：2025年11月22日 15:02:18 作者：活宝小娜
文章介绍了在Vue.js中删除DOM元素节点时遇到的问题,因为`document.querySelectorAll()`返回的是一个类数组对象,而不是数组,因此不能直接使用`remove()`方法,通过使用`Array.from()`方法可以将类数组对象转换为真正的数组,从而可以使用`remove()`方法删除DOM元素
vue中删除dom元素节点
document.querySelectorAll(…).remove is not a function"
document.querySelectorAll('.esedbox .triangle_b').remove()
因为
document.querySelectorAll(‘.esedbox .triangle_b')
返回的不是数组，而是类数组。
不能用remove方法（remove方法是dom元素节点的方法）
Array.from()方法主要用于将两类对象(类似数组的对象[array-like object]和可遍历对象[iterable]）转为真正的数组。
正确的写法
const cleardom = document.querySelectorAll('.esedbox .triangle_b, .triangle_p')
Array.from(cleardom).forEach((item) => {
item.remove()
})
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue.js实现一个瀑布流的组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup语法糖的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了基于vue组件实现猜数字游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
下面小编就为大家分享一篇vue.js中$set与数组更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue修改数据的时候，表单值回显不正确的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要介绍了vue3实现tabs导航栏点击每个导航项有下划线动画效果,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了解决Vue 给mapState中定义的属性赋值报错的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
在前端开发中,大数据量列表渲染 一直是性能挑战,假设我们有一个 API 返回 1 万条数据,如果直接渲染到页面,必然会导致严重卡顿甚至浏览器崩溃,解决方案就是虚拟列表,所以本文给大家介绍了本文两种实现,并给出适用场景,需要的朋友可以参考下2025-08-08
这篇文章主要为大家详细介绍了Vue如何利用Echart实现利用率表盘的效果，文中的示例代码讲解详细，具有一定的借鉴价值，需要的可以参考一下2023-04-04
vue2中Print.js的使用超详细讲解（pdf、html、json、image）
项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用（pdf、html、json、image）的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论