使用javascript創建和刪除div

-1

我有一些JavaScript函數旨在添加和刪除HTML div到更大的div。函數init是主體的onload。當外部按鈕調用NewLine（）時，會添加新行。當divs中的按鈕調用DeleteLine（）時，Div將被刪除。雖然代碼存在一些問題：當我添加新行時，所有其他行的顏色值將被清除，並且在刪除行時，按鈕，標題和行框的ID會不同步。我經歷了幾次Chrome調試器，但每次修復它似乎都會導致一個新問題。我非常感謝我做錯了一些輸入。使用javascript創建和刪除div

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

來源

2015-10-21 Bill Bllson

你有困難時調試，因爲你的方法，你的代碼。您正在使用您構建的ID「標記」各種元素，並使用ID來查找和處理元素。這意味着當事情發生變化時，比如線路被刪除，您必須返回並修復標記。幾乎通過定義，你寫這樣做的複雜代碼將會有錯誤。即使你有很好的調試技巧，你也會花一些時間來解決這些錯誤。

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

讓我們從DeleteLine開始。相反，它傳遞了許多，它傳遞的元素本身，你可以做我的固定你的大DOM字符串中的代碼如下：

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

因此，我們必須爲行元素沒有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); 
    } 
}

來源

2015-10-21 03:43:49

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

var changedButton.setAttribute("onclick",changedButtonOC);這不是一個變量聲明。省略var。
for (; num < numOfLines + 1 ;) { num++; ...這裏的正確形式將只是for (; num < numOfLines + 1; num++) { ...。
而是遞增的（num++），然後遞減（num--）周圍的循環，爲什麼不使用正確的數學嗎？

參見：

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

來源

2015-10-21 01:14:11

使用javascript創建和刪除div

回答

相關問題