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，所以最近接触最多的就是vue，下面小编给大家介绍下vue组件间事件传递，需要的朋友参考下吧2017-12-12
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章主要介绍了vue组件（全局，局部，动态加载组件）,需要的朋友可以参考下2018-09-09
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2024-02-02
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
这篇文章主要介绍了Vue+elementui 实现复杂表头和动态增加列的二维表格功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下2023-02-02
详解vue-router 动态路由下子页面多页共活的解决方案
这篇文章主要介绍了vue-router 动态路由下子页面多页共活的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue-electron项目创建记录及注意事项,本文给大家分享了运行项目报错的问题小结及多种解决方案,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
本篇文章主要介绍了vue省市区三联动下拉选择组件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了vue中路由重定向redirect问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论