如何清除JS创建的DIV?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何清除JS创建的DIV?相关的知识,希望对你有一定的参考价值。

用 var oDiv = document.createElement("DIV");
动态创建的DIV,创建之后,如果想用JS清除,就是把这个DIV删除掉。怎么清除呢?

代码如下:
function addDiv(w,h)
deleteDiv();
//创建一个div
var my = document.createElement("divCell");
//添加到页面
document.body.appendChild(my);
my.style.position="absolute";
//通过样式指定x坐标(随机数0~450)
my.style.top= Math.round(Math.random()*450);
//通过样式指定y坐标(随机数0~700)
my.style.left= Math.round(Math.random()*700);
//通过样式指定宽度
my.style.width=w;
//通过样式指定高度
my.style.height=h;
//通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"
my.style.backgroundColor="#ffffcc";
//添加div的内容
//my.innerhtml=i++;
//设置样式透明
my.style.filter = "alpha(opacity=50)";
//设置ID
my.id = "divCell";


function deleteDiv()

var my = document.getElementById("divCell");
if (my != null)
my.parentNode.removeChild(my);
参考技术A 清除某个元素 最好用 元素.parent.removeChildNode(元素); 这个方式最好

所以你的问题可以通过以下的语句解决
oDiv.parent.removeChildNode(oDiv);
参考技术B document.removeChild("oDiv");
document.remove("oDiv");
这两个你试试哪个行本回答被提问者采纳

如何在没有 innerHTML = ""; 的情况下清除 div 的内容

【中文标题】如何在没有 innerHTML = ""; 的情况下清除 div 的内容【英文标题】:How do I clear the contents of a div without innerHTML = ""; 【发布时间】:2011-06-30 18:36:19 【问题描述】:

我有一个由 JS 创建的 DOM 元素填充的 div,

我希望在 JS 函数重复时清除 div,但是我听说使用 document.getElementById('elName').innerHTML = ""; 不是一个好主意,

清除 div 内容的有效替代方法是什么?

【问题讨论】:

您从哪里听到的?有链接吗? 通过字符串操作 DOM 不是一个坏主意吗? @Myles:让浏览器再次解析一个字符串可能比给它一个 DOM 树要慢(这就是为什么人们会建议不只是粘贴字符串),但这不适用于这里,因为显而易见的原因。 尽管'' 是一个字符串,但它是一种“用字符串操作DOM”的极其轻量级的方式。对于编码人员来说,它高效、定义明确且直观。我敢说这比在循环中删除孩子要快得多。 实际上这可能是个问题,因为 IE 将 innerHTML 关联为某些元素的只读属性,并且可能引发讨厌的“未知运行时错误”。所以你最好小心使用它。另见This answer 【参考方案1】:

如果你有 jQuery,那么:

$('#elName').empty();

否则:

var node = document.getElementById('elName');
while (node.hasChildNodes()) 
    node.removeChild(node.firstChild);

【讨论】:

【参考方案2】:

Prototype 方式为Element.update() 例如:

$('my_container').update()

【讨论】:

【参考方案3】:

如果您使用 jQuery,请查看 .empty() 方法 http://api.jquery.com/empty/

【讨论】:

【参考方案4】:

你可以遍历它的子节点然后删除,即。

var parDiv = document.getElementById('elName'),
    parChildren = parDiv.children, tmpChildren = [], i, e;

    for (i = 0, e = parChildren.length; i < e; i++) 
        tmpArr.push(parChildren[i]);
    

    for (i = 0; i < e; i++) 
        parDiv.removeChild(tmpChildren[i]);
    

如果您使用的是 jQuery,请使用 .empty()。 这只是一种替代解决方案,while 循环更加优雅。

【讨论】:

我不确定,但只是觉得那行不通。删除节点后索引是否更新? 确实如此。使用 i-- 从长度循环到 0。 我不记得了,但我认为您可能是对的。不管怎样,我都会使用 Alnitak 的 while 循环,它看起来更干净。【参考方案5】:

您可以重新定义 .innerHTML。在 Firefox 和 Chrome 中,使用 .innerHTML = "" 清除元素不是问题。在 IE 中是这样,因为任何子元素都会立即被清除。在这个例子中,“mydiv.innerHTML”通常会返回“undefined”。 (没有重新定义,即在 IE 11 中截至本文创建之日)

if (/(msie|trident)/i.test(navigator.userAgent)) 
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", 
  get: function () return innerhtml_get.call (this),
  set: function(new_html) 
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) 
    this.removeChild (childNodes[0])
   
   innerhtml_set.call (this, new_html)
  
 )


var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/DLLbc/9/

【讨论】:

以上是关于如何清除JS创建的DIV?的主要内容,如果未能解决你的问题,请参考以下文章

JQuery,如何清除,除了点击的元素以外,其他所有元素

用js如何修改如下div的内容?

js如何把一个div内容作为变量用?

如何用js 在div内插入内容

如何清除 React.js 中的状态?

如何在 Vue.js 中使用 v-for 动态创建新的 div?