Question

在下面的代码中我需要编写删除类的元素（devil）的函数，我编写了删除函数，但是出了点问题。谢谢你的时间！

html代码

<html>
    <title>Test</title>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>
    <body onload="draw()" onclick="shoot(event)">
            <div id="box" onmousemove="move(event)">
                <img id="aim"src="img/1.png" alt="">
            </div>
            <div id="borderleft"></div>
            <div id="info">     
            </div>

    </body>
</html>

css代码

body{
    margin: 0px;
}
img{
    position: absolute;
}

#box{
    background-color: #c0c0c0;
    width: 500px;
    height: 500px;
    cursor: none;
    z-index: 2;

}
#info{
    width: 524px;
    height: 30px;
    border: 1px;
    background-color: gray;
    position: absolute;
}

#borderleft{
    top:-25px;
    height: 525px;
    width: 25px;
    margin-left: 499px;
    background-color: gray;
    position: absolute;
}

#info, #border{

    z-index: 3;
}


.devil{
    z-index: 1;

}

和JavaScript代码

function move(e){
  if(e.clientX<500 &&  e.clientY<500){
   // alert(e.clientX+":"+e.clientY)
  //cautam divul info
  info=document.getElementById("info")

  //schimbam textul din terior
  //innerHTML-
  info.innerHTML=e.clientX+":"+e.clientY

  //miscam imaginea cu mouse
  //gasim imaginea dupa id
  aim=document.getElementById("aim");
  aim.style.left=(e.clientX-25)+"px";
  aim.style.top=(e.clientY-25)+"px";
  }
  //animatia se face mai bine in pozitia absolute
  //la absolute update se face doar la absolut div da la relative la toata pagina

}

//functia care va desena imagini
function draw(){
 // generam cantitate de obiecte
 N_objects=parseInt(Math.random()*10);

 // ciclu-adaugam imaginile in boxa
  //gasim box
  box=document.getElementById("box");

  for(i=0;i<N_objects;i++){
    //cream elemente noi
    o=document.createElement('img');
    //setam adresa
    o.src="img/2.png";
    //adaugam element in box
    box.appendChild(o);

          o.setAttribute("class","devil")
    //coordonate aleatoare
    o.style.left=parseInt(Math.random()*449)+'px';
    o.style.top=parseInt(Math.random()*449)+'px';
   }



}

 function shoot(e){
// alert(e.clientX+":"+e.clientY)
devil=document.querySelectorAll('.devil')
//verificam daca am nimerit in toate imaginile
for(i=0;i<devil.length;i++)
{
  if (e.clientX>parseInt(devil[i].style.left) )
    if(e.clientY>parseInt(devil[i].style.top) )
      if(e.clientX<parseInt(devil[i].style.left)+50 )
        if(e.clientY<parseInt(devil[i].style.top)+50 )
         {
          element=getElementByClass("devil");
          element.parentNode.removeChild(element)
         };
}

}

在函数拍摄中，if语句里面需要一个用（devil）类删除元素的函数，我写了这行但是我有一个错误。

element=getElementByClass("devil");
element.parentNode.removeChild(element)

Answer 1

ID 被限制为在HTML中是唯一的（一些网页设计师似乎不这么认为。如果你找到其中一个，那就打它们）。类不是 - 所以任何找到特定类的方法都会返回一组。

如果您希望只有一个特定的HTML元素，请设置其ID而不是其类，并使用getElementById()检索它。

相反，如果你希望有一个特定元素类型的多个（即“borderBox”或“gameEnemy”）使用一个类，并使用for循环迭代getElementsByClassName的结果，可能会执行每个人都有相同的操作。（如果你不熟悉for循环，你可能真的想要通过JavaScript基础课程）

Answer 2

那么你在某处定义了getElementByClass方法吗？

JavaScript中没有getElementByClass，有一个document.getElementsByClassName返回一个集合。

var element = document.getElementsByClassName("devil")[0];
element.parentNode.removeChild(element)

我尝试删除元素时出错

2 个答案: