使用javascript創建和刪除div

Question

我有一些 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;
}

Answer 1

由於您的方法，您很難調試代碼。 您正在使用您構建的 ID“標記”各種元素，並使用 ID 來查找和尋址元素。 這意味着當事情發生變化時，例如行被刪除，您必須返回並修復標記。 幾乎根據定義，您為執行此類操作而編寫的復雜代碼將有錯誤。 即使你有很好的調試技巧，你也會花一些時間來解決這些錯誤。

不要過度使用 ID 作為識別 DOM 元素的窮人方式。 這樣做需要在創建元素時構造 ID 並為子元素構造更多 ID。 然后要再次找到該元素，您必須構造另一個 ID 字符串並執行getElementById 。 相反，使用 JavaScript 來管理 DOM。 不是傳遞 ID 和 ID 的一部分（如數字），而是傳遞 DOM 元素本身。 就您而言，您根本不需要 ID。

讓我們從DeleteLine開始。 不是向它傳遞一個數字，而是將元素本身傳遞給它，您可以將大 DOM 字符串中的代碼修復如下：

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

所以我們沒有 line 元素的 ID，沒有元素的 ID，onclick 處理程序中也沒有 ID。 DeleteLine本身現在可以簡單地

function DeleteLine(line) {
{
  line.parentNode.removeChild(line);
  renumberLines();
}

我們稍后會展示renumberLines 。 無需調整 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;
}

剩下的唯一工作是修復標題以顯示正確的數字。 您可以通過循環遍歷這些行來做到這一點，如

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);
  }
}

Answer 2

我投關閉，因為這個問題太廣，但無論如何都會回答了幾個點......好吧，在正確的方向點。

1. var changedButton.setAttribute("onclick",changedButtonOC); 這不是變量聲明。 省略var 。

2. for ( ; num < numOfLines + 1 ; ) { num++; ... for ( ; num < numOfLines + 1 ; ) { num++; ...這里正確的形式就是for (; num < numOfLines + 1; num++) { ... 。

3. 與其在循環中遞增（ num++ ）然后遞減（ num-- ），為什么不使用正確的數學方法呢？

看：

for (; num < numOfLines; num++) {
  ...
}