使用javascript创建和删除div

我设计了一些JavaScript函数，用于在较大的div中添加和删除HTML div。函数init是主体的onload。当外部按钮调用NewLine（）时，会添加新行。当所述div内的按钮调用DeleteLine（）时，div被移除。但是代码有一些问题：当我添加新行时，所有其他行的颜色值都会被清除，而当删除行时，按钮、标题和行框的ID会不同步。我已经用Chrome调试器检查过几次了，但每次我修复一些东西时，似乎都会引起新的问题。我将非常感谢您对我做错了什么的意见

function init()
{
    numOfLines = 0; //Keeps track of the number of lines the Artulator is displaying
}

function NewLine()
{
   var LineBoxHolder        = document.getElementById("LineBoxHolder");
   numOfLines               += 1;
   LineBoxCode              += "<div class = 'Line Box' id = 'LineBox" + numOfLines + "'>" //The code is only split onto multiple lines to look better
                            + "    <h6 id = 'Title " + numOfLines + "' class = 'Line Box Title'>Line " + numOfLines + "</h6>";
                            + "    <p>Color: <input type = 'color' value = '#000000'></p>"
                            + "    <input type = 'button' value = 'Delete Line' id = 'DeleteLine" + numOfLines + "' onclick = 'DeleteLine(" + numOfLines + ")'/>"    
                            + "</div>";
   LineBoxHolder.innerHTML += LineBoxCode;
}
function DeleteLine(num)
{
    deletedLineName     = "LineBox" + num;
    deletedLine         = document.getElementById(deletedLineName);
    deletedLine.parentNode.removeChild(deletedLine);
    num++;
    for ( ; num < numOfLines + 1 ; )
    {
        num++;
        var newNum                              = num - 1;
        var changedLineName               = "LineBox" + num;
        var changedHeaderName          = "Title" + num;
        var changedButtonName           = "DeleteLine" + num;
        var changedButtonOC              = "DeleteLine(" + newNum + ")";
        var changedLine                       = document.getElementById(changedLineName);
        var changedHeader                  = document.getElementById(changedHeaderName);
        var changedButton                   = document.getElementById(changedButtonName);
        var changedLine.id                   = "LineBox" + newNum;
        var changedHeader.innerHTML = "Line" + newNum;
        var changedHeader.id               = "Title" + newNum;
        var changedButton.setAttribute("onclick",changedButtonOC);
        var changedButton.id                = "DeleteLine" + newNum;
    }
    num--;
    numOfLines = num;
}

函数init（）
{
numOfLines=0；//跟踪Artulator正在显示的行数
}
函数换行符（）
{
var LineBoxHolder=document.getElementById（“LineBoxHolder”）；
numOfLines+=1；
LineBoxCode+=“”//代码仅拆分为多行，以便看起来更好
+“行”+numOfLines+”；
+“颜色：
”
+ "    "    
+ "";
LineBoxHolder.innerHTML+=LineBoxCode；
}
函数DeleteLine（num）
{
deletedLineName=“LineBox”+num；
deletedLine=document.getElementById（deletedLineName）；
deletedLine.parentNode.removeChild（deletedLine）；
num++；
对于（；num

我投票决定结束，因为问题太广泛了，但我还是会回答几点。。。好吧，指向正确的方向

var changedButton.setAttribute（“onclick”，changedButtonOC）这不是变量声明。省略
var

for（；num

这里的正确形式应该是

for（；num

与其在循环中先递增（

num++

），然后递减（

num--

），为什么不使用正确的数学方法呢

见：

（；num{ ... }

---

由于您的方法，您在调试代码时遇到了困难。您正在“标记”使用您构造的ID创建各种元素，并使用ID查找和寻址元素。这意味着，当事情发生变化时，例如删除行，您必须返回并修复标记。几乎从定义上讲，您编写的用于执行类似操作的复杂代码将有bug。即使您具有出色的调试技能，您也会遇到问题我会花一些时间解决这些问题

不要过度使用ID作为穷人识别DOM元素的方法。这样做需要在创建元素时构造ID并为子元素构造更多ID。然后，要再次找到元素，必须构造另一个ID字符串并执行

getElementById

。相反，使用JavaScript管理不要传递ID和ID的一部分，比如数字，而是传递DOM元素本身。在你的例子中，你根本不需要ID

让我们从

DeleteLine

开始。与其给它传递一个数字，不如给它传递元素本身，这样您就可以按照如下方式修复大DOM字符串中的代码：

<input type='button' value='Delete Line' onclick="DeleteLine(this.parentNode)"/>

稍后我们将显示

重新编号

。无需调整ID、重写现有元素或其他任何操作

由于我们不再需要每行或其子元素上的ID，因此创建每个元素的代码变得更加简单：

function NewLine()
{
   var LineBoxHolder = document.getElementById("LineBoxHolder");
   numOfLines        += 1;

   var LineBoxCode   = "<div class='LineBox'>" +                                      
                     + "  <h6 class='LineBoxTitle'>Line " + "numOfLines + "</h6>"
                     + "  <p>Color: <input type='color' value='#000000'></p>"
                     + "  <input type='button' value='Delete Line' onclick= 'DeleteLine(this.parentNode)'/>"    
                     + "</div>";
   LineBoxHolder.innerHTML += LineBoxCode;
}

函数换行符（）
{
var LineBoxHolder=document.getElementById（“LineBoxHolder”）；
numOfLines+=1；
var LineBoxCode=”“+
+“行”+“行数+”
+“颜色：
”
+ "  "    
+ "";
LineBoxHolder.innerHTML+=LineBoxCode；
}

剩下的唯一工作就是修改标题以显示正确的数字

function renumberLines() {
  var LineBoxHolder = document.getElementById("LineBoxHolder");
  var lines = LineBoxHolder.childElements;
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    var h6 = line.querySelector('h6');
    h6.textContent= "Line " + (i+1);
  }
}

函数重新编号（）{
var LineBoxHolder=document.getElementById（“LineBoxHolder”）；
变量行=LineBoxHolder.childElements；
对于（变量i=0；i

function NewLine()
{
   var LineBoxHolder = document.getElementById("LineBoxHolder");
   numOfLines        += 1;

   var LineBoxCode   = "<div class='LineBox'>" +                                      
                     + "  <h6 class='LineBoxTitle'>Line " + "numOfLines + "</h6>"
                     + "  <p>Color: <input type='color' value='#000000'></p>"
                     + "  <input type='button' value='Delete Line' onclick= 'DeleteLine(this.parentNode)'/>"    
                     + "</div>";
   LineBoxHolder.innerHTML += LineBoxCode;
}

function renumberLines() {
  var LineBoxHolder = document.getElementById("LineBoxHolder");
  var lines = LineBoxHolder.childElements;
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    var h6 = line.querySelector('h6');
    h6.textContent= "Line " + (i+1);
  }
}