JS 操縱DOM問題,刪除一個指定屬性的元素


有以下HTML代碼:
  <div level="1"></div>
<div level="1"></div>
<div level="2"></div>
<div level="2"></div>
<div level="3"></div>
<div level="2"><a></a></div>
<div level="2"><a></a></div>
<div level="1"></div>


要求用JS刪除所有level為2的div元素以及其中包含的元素,請問JS該怎么寫?

17 个解决方案

#1



<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script>  
var aa =  document.getElementsByTagName("div");
for(var i=0;i<aa.length;i++)
{
var level = aa[i].level; 
if(level=="2")
{
aa[i].outerHTML="";
}
}
</script>  

#2


<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script> 
function deldiv(){
var div =  document.getElementsByTagName("div");
for(var i=0;i<div.length;i++)
{
var level = div[i].level; 
if(level=="2")
{
div[i].parentNode.removeChild(div[i]); 
}
}
}
</script> 
<a href="javascript:" onclick="deldiv()">刪除level為2的div元素以及其中包含的元素</a>

#3


div沒有level這個屬性 能取出來么

#4


兼容IE和FF的:

<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script> 
function deldiv(){
var div =  document.getElementsByTagName("div");
for(var i=0;i<div.length;i++)
{
var level = div[i].getAttribute('level'); 
if(level=="2")
{
div[i].parentNode.removeChild(div[i]); 
}
}
}
</script> 
<a href="javascript:" onclick="deldiv()">刪除level為2的div元素以及其中包含的元素</a>

#5


1樓的有點錯誤
改正

<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script>  
var aa =  document.getElementsByTagName("div");
var bb = new Array();
for(var i=0;i<aa.length;i++)

var tt = aa[i].level; 
if(tt=="2")

aa[i].outerHTML=""; 
aa =  document.getElementsByTagName("div");
i=i-1;
}

</script>  

#6


汗!不知道怎么每次只刪2個!倒!
我檢查下,哪出了問題

#7


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <div>
        <div level="1">
            a
        </div>
        <div level="1">
            b
        </div>
        <div level="2">
            c2
        </div>
        <div level="2">
            d2
        </div>
        <div level="3">
            e
        </div>
        <div level="2">
            f2
        </div>
        <div level="2">
            g2
        </div>
        <div level="1">
            h
        </div>
    </div>
    <input type="button" value="del Div Level=2" onclick="delLevelDiv('2')" />
</body>
</html>

<script type="text/javascript">
function delLevelDiv(level)
{
    var divs=document.getElementsByTagName('div');
    if(divs.length==0) return;
    var j=0;
    for(var i=0;i<divs.length;i++)
    {
        if(divs[i].getAttribute('level')==level) j++;
    }
    if(j==0) return;
    
    for(var i=0;i<divs.length;i++)
    {
        var p=divs[i].parentNode;
        if(divs[i].getAttribute('level')==level) 
         p.removeChild(divs[i]);
    }
    divs=document.getElementsByTagName('div');
    if(divs.length>0) delLevelDiv(level);
    
}
</script>

#8


那是跟索引的,所以每次只刪兩個,要用遞歸

#9


引用 3 樓 bluefcxt 的回復:
div沒有level這個屬性 能取出來么

這是是自己添加的一個屬性

#10


4 樓的也會有錯的.還有漏掉的.
改成下面的就很完美了

<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script> 
function deldiv(){
    var div =  document.getElementsByTagName("div");
    for(var i=0;i<div.length;i++)
    {
        var level = div[i].getAttribute('level'); 
        if(level=="2")
        {
            div[i].parentNode.removeChild(div[i]); 
            div =  document.getElementsByTagName("div");
            i=i-1;
        }
    }
}
deldiv();
</script> 

#11


<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script> 
function deldiv(){
var div =document.getElementsByTagName("div");
var j=0;
var arr=new Array(div.length)
for(var i=0;i<div.length;i++)

var level=div[i].getAttribute('level')
if(level=="2")
{
arr[j]=div[i];
j=j+1;
}
}
for(var k=0;k<=j;k++){
arr[k].parentNode.removeChild(arr[k]);
}
}
</script> 

這樣就可以一次刪完
我再看看,為什么那樣不能一次刪完

#12


引用 5 樓 lu_huanling 的回復:
1樓的有點錯誤 
改正 

HTML code
<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script>  
var aa =  document.getElementsByTagName("div");
var bb = new Array();
for(var i=0;i<aa.length;i+…

這里的bb似乎是多余的

#13


引用 10 樓 lu_huanling 的回復:
4 樓的也會有錯的.還有漏掉的. 
改成下面的就很完美了 

HTML code
<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script> 
function deldiv(){
    var div =  document.getElementsByTagName("di…


不錯,這樣重定義

#14


引用 12 樓 redcn2004 的回復:
引用 5 樓 lu_huanling 的回復:
1樓的有點錯誤 
改正 

HTML code 
<div level="1">111 </div> 
<div level="1">2222 </div> 
<div level="2">33333 </div> 
<div level="2">44444444 </div> 
<div level="3">5555555555 </div> 
<div level="2"> <a>66666666666 </a> </div> 
<div level="2"> <a>777777777 </a> </div> 
<div level="1">9000 </div> 
<script>  
var aa =  document.getElementsByTagName("div")…


你就沒看到我發的?
只看他的?

#15


還是准備倒分的?
要是倒分的事先聲明一下,讓我們閃!

#16


引用 14 樓 chinmo 的回復:
引用 12 樓 redcn2004 的回復:
引用 5 樓 lu_huanling 的回復: 
1樓的有點錯誤 
改正 

HTML code 
<div level="1">111 </div> 
<div level="1">2222 </div> 
<div level="2">33333 </div> 
<div level="2">44444444 </div> 
<div level="3">5555555555 </div> 
<div level="2"> <a>66666666666 </a> </div> 
<div level="2"> <a>777777777 </a> </div> 
<div level="1">9000 </div> 
<script>  
var aa =  docum…

在看呢,我現在正在分析代碼呢

#17


引用 11 樓 chinmo 的回復:
HTML code<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script> 
function deldiv(){
    var div =document.getElementsByTagName("div");
    var j=0;
    var arr=new Array(div.length)
    f…

為什么要采用數組暫存呢?

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com