最近写了个active控件(所以仅限在IE上开发和调试),控件实现播放器的功能,该元素的生成和消除都是用js dom操作实现,生成没问题,但是remove的时候,该元素始终不消失(在界面上不消失,但F12调试模式,审查dom元素却找不到该元素)。目前是IE11的版本。
现在详细描述下问题:
点击按钮,生成控件(灰色的部分):
此时生成的控件应该是已经消失了。看下源码:生成代码->
删除控件代码:
var player = $(obj).parent().prev().children();
//上图中,判断资源存在与否,如果不存在资源,则删除该控件
if (player.parent().attr("resources") == "undefined"||player.parent().attr("resources") == "null") {
console.log($(obj).parent().prev()[0]);
//player.remove();
console.log(player[0]);
$(obj).parent().prev().empty();
console.log($(obj).parent().prev().children()[0]);
$(obj).parent().prev().attr("style",
"background-image:url('images/crash.png'); background-size:100% 100%;");
//player.parent().remove();
//player.remove();
return;
}
点击按钮之后,打印出的数据显示未获取到数据,应该判断为“undefined”:
所以,理应删除该控件了,但是并未删除:
但是更改页面(增加、删除、移动界面其它dom元素后,就会自动消失)
求大婶指教,?
==========>>>>>>>问题更新<<<<<<==========
今天调试了下,竟然dom元素没有生成(只是调试模式中,console没有输出生成的dom,其实网页还是有成功生成)?还是IE调试的问题?
代码如图:
代码对应的控制台信息:
console.log(player[0])只打印了当前的dom数据,并没有打印出子元素,调用console.log(player.children()[0])才打印出子元素……如果这是IE问题,那大家不看这部分更新的问题,回到之前的问题
所以,执行empty()之后,并不能看出是否运行了删除事件。
那么,把代码中的player.empty()方法删除之后,dom资源管理器中能够监测到生成的元素。
如图(在dom资源管理器中),执行player.empty()之后,元素已经被置换为crash.png图片了:
删除player.empty()这段代码后,dom资源管理器,能够看到生成的元素,结果和代码如下:
=========>>>>>>>>>>第二版更新<<<<<<<<<<<<<==============
不执行player.empty(),console.log()能打印生成的dom,但是执行empty()方法后,console并不能打印出子元素,前后来个对比(想表达的区别在"显示生成的控件"之后):
不执行empty()的输出:
执行empty()的输出:
代码是:
console.log("显示生成的控件:");
console.log(player[0]);
console.log("生成的子元素");
console.log(player.children()[0]);
if (player.attr("resources") == "undefined"||player.attr("resources") == "null") {
player.empty();// ====== 区别在是否执行这段代码后控制台的输出
console.log("删除之后的控件结构:");
console.log(player[0]);
player.attr("style","background-image:url('images/crash.png'); background-size:100% 100%;");
return;
}
……大家见谅表达有限,不知问题是否陈述清除,望大家不吝赐教。?