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()
      })

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • el-elementUI使用el-date-picker选择年月

    el-elementUI使用el-date-picker选择年月

    本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-02-02
  • Vue2中无法检测到数组变动的原因及解决

    Vue2中无法检测到数组变动的原因及解决

    由于某些限制,vue2不能检测到某些情况下数组的变动,本文就将具体讲解这两种限制的解决思路
    2021-06-06
  • vue如何转换时间格式为年月日时分秒和年月日(补零)

    vue如何转换时间格式为年月日时分秒和年月日(补零)

    这篇文章主要介绍了vue如何转换时间格式为年月日时分秒和年月日(补零),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 详解Vue 多级组件透传新方法provide/inject

    详解Vue 多级组件透传新方法provide/inject

    这篇文章主要介绍了详解Vue 多级组件透传新方法provide/inject,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue接入ts基本方法

    vue接入ts基本方法

    这篇文章主要介绍了vue接入ts基本方法,关于ts,也出了很久,下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法,也算是一个初级尝试,简单梳理下基础的接入配置和已经遇到的问题,供需要的小伙伴们参考
    2022-01-01
  • elementui Select选择器嵌套tree实现TreeSelect方式

    elementui Select选择器嵌套tree实现TreeSelect方式

    这篇文章主要介绍了elementui Select选择器嵌套tree实现TreeSelect方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

    在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • vue 计算属性和侦听器的使用小结

    vue 计算属性和侦听器的使用小结

    这篇文章主要介绍了vue 计算属性和侦听器的使用小结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue异步axios获取的数据渲染到页面的方法

    vue异步axios获取的数据渲染到页面的方法

    今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 项目中Axios二次封装实例Demo

    项目中Axios二次封装实例Demo

    vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下
    2021-06-06

最新评论