使用iview实现某些组件时报错Failed to execute removeChild on Node

最新推荐文章于 2024-07-14 20:54:37 发布
最新推荐文章于 2024-07-14 20:54:37 发布
阅读量837 收藏
点赞数
分类专栏： UI库组件 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICe_sea753/article/details/107021355
版权
在使用iview的Tree组件进行编辑功能开发时，遇到添加和修改子节点时报出'Failed to execute removeChild on Node'错误。错误源于iview.js中的某个函数，问题在于this.$el的判断不正确。为了解决这个问题，可以修改函数，利用document.body.contains首先检查待删除node是否为body的子节点，确保安全删除。
摘要由CSDN通过智能技术生成

完整错误

报错

出现场景

在用iview实现tree组件实现编辑的功能时出现
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

添加子节点和修改子节点时报错

分析原因

报错位置，iview.js的这个函数
说明this.$el判断有问题
错误意思是删除一个node，但是它不是body的子node
在这里插入图片描述

解决办法

用document.body.contains改写函数，先来判断是不是body的子node，然后删除
在这里插入图片描述

最低0.47元/天 解锁文章
iceseasyh
关注
专栏目录
VUEJS项目实践七之Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of
Yolanda_NuoNuo的专栏
05-02 3万+
问题描述： Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node. 问题背景： 在我之前的博文 VUEJS项目实践五之Dialog弹出框MessageBox（超好看的bootstrap样式） 中有介绍一个样式结合了Bootstrap样式的MesageBox 然后在之...
js报错信息：Failed to execute ‘removeChild‘ on ‘Node‘: The node to be removed is not a child of this node
weixin_44344709的博客
09-08 3528
做的是商品放大镜的效果，有三个事件，鼠标移入（mouseenter）时创建蒙版（maskDiv），鼠标移动（mousemove）时蒙版跟随鼠标移动，鼠标移出（mouseleave）时移除蒙版。因为刚开始将创建蒙版放在了mouseenter事件里，mouseenter和mouseleave事件中都需要对蒙版进行操作，所以将mouseenter和mouseleave放在了mouseenter中嵌套使用。还是没搞懂报错的原因，试了下用传统的on来注册事件再进行这样的事件嵌套时是不会报错的。
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'报错问题
热门推荐
sisixiyu6688的博客
09-17 1万+
原因： node_modules > iview > src > components > spin.js remove (cb) { spin.visible = false; setTimeout(function() { spin.$parent.$destroy(); //这个地方少了一个这个节点判断，导致removeChild 里面的节...
Failed to execute ‘removeChild‘ on ‘Node‘: The node to be removed is not a child of this node.
最新发布
SaRAku的博客
07-14 1138
不知道大家见到过这个removeChild报错没有，去年项目设置了错误崩溃的兜底后，发现上线后页面瞬间疯狂报错页面崩溃，而且根本找不到头绪，报错原因就是这个removeChild找不到节点，真的要碎了。本地根本没有办法复现，根据报错的UA分析，更是所有机型都存在，如果遇上用户反馈，我们只能建议他们换个浏览器试试。
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
在使用IView的`Tree`组件时，你需要定义好数据结构，一般包含节点ID、父节点ID、节点文本等属性。为了支持拖拽，还需要添加额外的字段来记录拖动状态，例如拖动源节点ID和目标节点ID。 为了实现以上功能，你需要对...
iview的日历组件，iview的日历组件
02-01
在前端开发领域，`iView` 是一个广受欢迎的 Vue.js UI 框架，它提供了许多优雅且易于使用的组件，极大地提升了开发效率。本文将深入探讨 `iView` 的日历组件，帮助开发者理解其核心功能、用法以及如何在实际项目中...
使用iView Upload 组件实现手动上传图片的示例代码
10-17
在本文中，我们将深入探讨如何使用iView UI库中的Upload组件来实现在前端手动上传图片的功能。iView Upload组件提供了一种优雅的方式处理文件上传，包括预览、删除和进度显示，同时也支持拖拽上传。以下是你需要了解...
vue v-for渲染数据出现DOMException: Failed to execute 'removeChild' on 'Node': The node .....
weixin_30458043的博客
07-12 1287
在项目中,使用了vue的v-for渲染数组数据,在一次改变数组的时候出现异常报错,而实际的数组是已经变化过的了,页面卡死 网上找了一下原因,说是vue的DOM渲染的时候,删除之后DOM里面的还没有反应过来,在v-for的上一级添加一个v-if的状态,删除的时候隐藏,数组更新完成时候显示 真的就不会了....具体不再深究了 转载于:https://www.cn...
Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq 117791303
01-26 4667
setting.html:1422 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. setting.html:4858 Uncaught TypeError: Cannot read property 'value' of null. Util.byId(); getElementById(); ...
TypeError: Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
qq_44755885的博客
10-18 4339
JS动态删除，for中慎用带有i的元素。
Failed to execute 'removeChild' on 'Node'
walle的博客
04-08 1万+
jquery删除一个元素时报错： $('#div1').remove(); Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? 可能是别的地方已...
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
xiaoyaowyh的博客
03-07 6402
VM9328 hbox.js:52 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at Object.remove (VM9328 hbox.js:52) at HBox.fn.init._executive (VM9328 hbox...
DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node to be
u013023845的博客
02-10 3384
vue的DOM渲染的时候,删除之后DOM里面的还没有反应过来,解决方法，延时执行： setTimeout(this.removeLocationView(), 1); 这样问题解决了
解决Chrome浏览器登录neo4j“ NotFoundError: Failed to execute ‘removeChild‘ on ‘Node‘: The node is not a chil
weixin_41969113的博客
06-17 1805
原因: neo4j数据库登录之前不能翻译为中文 解决：将浏览器翻译功能关闭即可
Something went wrong: “NotFoundError: Failed to execute ‘removeChild‘ on ‘Node‘: The node to be remo
风口IT猪的成长录
04-17 1426
Something went wrong: "NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node." and the application can't recover.
解决iview table组件报错问题You may have an infinite update loop in watcher with expression “columns“的两种方法
fanhailing的博客
09-08 8063
在使用table切换的时候出现报错： 代码是这样的： 表头是多级的。 查找了一下解决方案，多数是这一种： 方法一、更改iview.js源码： 改为： 但是这个仅限于本地使用，最好的是更改table组件，然后build生成iview.js和iview.min.js 更改table组件代码： src/components/table/table.vue中： 将： 画红框线位置代码改为： 然后重新build一下生成iview.js和iview.min.js。 方法二：不更改源码 在table外一层用v
vue 报错：DOMException: Failed to execute ‘removeChild‘ on ‘Node‘
且听风吟的博客
09-03 8306
在使用vue的时候，我们因为改变了页面的DOM结构，可能会遇见这样的告警信息，并且页面会被卡主，需要刷新才可以解决；但是，在实际项目中，这样的情况肯定是不允许出现的。错误告警如下： "NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’。 如下图： 关于 v-if 和 v-show 两个指令的区别，传送门： v-if 和 v-show 的区别 ...
vue开发常见却难以定位的报错
weixin_46368743的博客
06-26 3516
故而，将以上代码中的 selectValue: undefined, 修改为 selectValue: [ ],即可解决报错。由于元素为v-if判断为不渲染的元素，而我们又在后面要获取到这个元素，所以这里应该。为 应该 获取到，但实际没获取到 或 获取到的值与预期不符。将 v-if 改为 v-show。据elementUI官网可知：为。的值为当前选中值所组成的。属性即可启用多选，此时。
vue+iview 实现父组件在子组件表格中添加日期选择器
05-25
可以通过在子组件的表格列定义中使用`scoped-slot`来自定义渲染日期选择器，然后在父组件中传递一个日期选择器的`props`给子组件，在子组件中使用该`props`来控制日期选择器的显示和隐藏。 以下是一个简单的示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值