用JS隐藏或清除div

 如下示例：

<script language="javascript">
<!--
var obj=new Array();
function add(){
    var king=document.getElementById("text").value;
    document.getElementById("text").value="";
    if(king==""){
        alert("请输入"); return;
    }
    if(obj.length>0){
        for(var i=0;i<obj.length;i++){
            if(obj[i]==king){
                alert("相同"); return;
            }
        }
        obj[obj.length]=king;
    }
    var id="div"+obj.length;
    obj[obj.length]=king;
    var div=document.createElement('div');
    div.id=id;
    var span=document.createElement('span');
    span.innerHTML=king;
    var input=document.createElement('input');
    input.type="checkbox";
    var button=document.createElement('input');
    button.type="submit";
    button.value="删除";
    button.onclick=function(){del(div.id)};   
    div.appendChild(input);
    div.appendChild(span);
    div.appendChild(button);
    document.getElementById("div").appendChild(div);
    document.getElementById(id).checked="checked";   
}
function del(DIV){   
    var div=document.getElementById(DIV);
    div.parentNode.removeChild(div);
}
//-->
</script>
<p>
  <textarea id="text" name="textarea" rows="6" cols="60"></textarea>
  <input value="add" type="button" onclick="add()" />
</p>
<div id="div"></div>

 

可以将此代码拷贝到html文件中演示看一下效果，很好！

 

其中需要注意的是：必须明确定义将被删除的对象的父元素，例如：

                        var div=document.createElement("div");

                        document.body.appendChild(div);

      那么此时就可以使用div.parentNode.removeChild(div)来删除该对象。而如果没有document.body.appendChild(div);这一句，就无法删除了。

          如果不是添加到body中，而是其他层中，也必须明确定义：

                        var div=document.createElement("div");

                        parentDiv.appendChild(div);