javascript - 动态删除 div

Question

我必须在一个页面中添加多个缩略图（在 gengrid 函数中添加的 501.jpg、502.jpg 等），每个页面都会在单击时打开另一个图像（port.jpg），然后单击 port.jpg 具有的另一个缩略图即将被删除。问题是 removeChild 在这种情况下不起作用。谁能帮忙...这是代码

<script type="text/javascript">
var lastper=null;
function gengrid()
      {
          var i=0;
          var num_stud=8;
          var newdiv;
          var divIdName;
          var maindiv;
          for(i=1;i<=num_stud;i++)
          {
             newdiv = document.createElement('div');
             divIdName = '50'+i;
             newdiv.setAttribute('id',divIdName);
             newdiv.setAttribute('onclick','addit('+i+')');
             newdiv.innerHTML = '<img src=50'+i+'.jpg alt="a"></img>';
             maindiv=document.getElementById('main');
             maindiv.appendChild(newdiv);
          }
      }
   gengrid();
   function addit(picno)
      {
          var person = document.getElementById('50'+picno);
          if(lastper)
             lastper.removeChild('portfolio');
          var newdiv = document.createElement('div');
          var divIdName = 'portfolio';
          newdiv.setAttribute('id',divIdName);
          newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
          person.appendChild(newdiv);
          alert(picno+''+lastper.id+person.id);
          lastper = document.getElementById('50'+picno);
       } 
  </script>

Answer 1

if(lastper){
         lastper.removeChild('portfolio');return;}

Answer 2

我不相信这是一个元素的有效 ID。ID 必须以字母开头。

lastper = document.getElementById('50'+picno);

HTML 中 id 属性的有效值是什么？

Answer 3

试试这个

  function addit(picno)
  {
      var person = document.getElementById('50'+picno);
      lastper = document.getElementById('50'+picno);
      if(lastper)
         lastper.removeChild('portfolio');
      var newdiv = document.createElement('div');
      var divIdName = 'portfolio';
      newdiv.setAttribute('id',divIdName);
      newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
      person.appendChild(newdiv);
      alert(picno+''+lastper.id+person.id);          
   } 

Answer 4

主要问题是您将字符串传递给 removeChild 调用。使用

lastper.removeChild(document.getElementById('portfolio'));

相反会解决这个问题。

您收到的警报是次要问题。它会在第一次通过时失败，因为“lastper”为空，因此没有 id 属性。