刪除Div中的最後一個元素[JavaScript]

我遇到了一個奇怪的問題。我試圖做一個程序，將添加和刪除div內的另一個稱爲「身體」的div。要添加div，我使用document.getElementById("body").innerHTML。添加工作正常。但是，在刪除功能中，我將「body」id替換爲將被刪除的div的id。但是當我運行代碼時，出現錯誤「無法設置null的innerHTML」。我試圖用一個固定的局部變量替換id變量，它工作正常。我也嘗試給變量添加引號，但這也不起作用。我有什麼理由不能將id設置爲變量變量？謝謝。刪除Div中的最後一個元素[JavaScript]

這裏是我的代碼：

var i = 1; 
 

 
function myFunction() { 
 
    var addDiv = document.getElementById("body2"); 
 
    addDiv.innerHTML += "<div id = '" + i + "'><br><textarea id = '1' > foo < /textarea></div > "; 
 
    i++; 
 
} 
 

 
function myFunction2() { 
 
    var deleteDiv = document.getElementById(i); 
 
    deleteDiv.innerHTML = ""; 
 
    i--; 
 
}

<div id="body2"> 
 
    <div id="0"> 
 
    <textarea id="text">lol</textarea><button onclick="myFunction()">Add</button> 
 
    <button onclick="myFunction2()">Delete</button> 
 
    </div> 
 
</div>

來源

2017-07-18 Mister_Maybe

就像旁邊一樣，document.getElementById（「body」）。innerHTML可以縮短爲document.body.innerHTML https://developer.mozilla.org/en-US/docs/Web/API/Document/body – Orangesandlemons

不建議使用原始數值作爲ID（在整個頁面中應該是唯一的）。我建議使用前綴，比如'id ='myprefix _「+ i +」'' – Kaddath

要添加一個div後遞增我，所以你必須使用i-1同時刪除得到正確的ID。

var i = 1; 
 

 
function myFunction() { 
 
var addDiv = document.getElementById("body2"); 
 
addDiv.innerHTML += "<div id = '"+i+"'><br><textarea id = '1'>foo</textarea></div>"; 
 
i++; 
 
} 
 

 
function myFunction2() { 
 
var deleteDiv = document.getElementById(i-1); 
 
deleteDiv.remove(); 
 
i--; 
 
}

<div id = "body2"> 
 
<div id = "0"> 
 
    <textarea id = "text">lol</textarea><button onclick = 
 
    "myFunction()">Add</button> 
 
    <button onclick = "myFunction2()">Delete</button> 
 
</div> 
 
</div>

來源

2017-07-18 13:20:15 Dij

我嘗試了您的解決方案，但是在添加和減去幾次之後，它停止工作並將它們按順序刪除。 –

這是因爲'deleteDiv.innerHTML =「」;'，我錯過了它，你需要使用'deleteDiv.remove（）'代替，我已經更新了代碼，現在似乎工作。 – Dij

現在工作正常！謝謝！ –

要刪除最後一個孩子，你甚至可以用CSS選擇器last-child。您還應該添加特定的類到新添加的div，因爲您只想刪除新添加的div s。

這也將刪除i的依賴關係。

作爲附件，您還可以使用document.createElement + Node.appendChild而不是設置innerHTML。對於高嵌套結構，.innerHTMl將是昂貴的。

function myFunction() { 
 
    document.getElementById("body2").appendChild(getDiv()); 
 
} 
 

 
function getDiv(i){ 
 
    var div = document.createElement('div'); 
 
    div.classList.add('inner') 
 
    var ta = document.createElement('textarea'); 
 
    ta.textContent = 'foo'; 
 
    div.appendChild(ta); 
 
    return div; 
 
} 
 

 
function myFunction2() { 
 
    var div = document.querySelector('#body2 div.inner:last-child') 
 
    div && div.remove() 
 
}

<div id="body2"> 
 
    <div id="0"> 
 
    <textarea id="text">lol</textarea><button onclick="myFunction()">Add</button> 
 
    <button onclick="myFunction2()">Delete</button> 
 
    </div> 
 
</div>

您可以參考"innerHTML += ..." vs "appendChild(txtNode)"以獲取更多信息。

來源

2017-07-18 13:48:34 Rajesh

刪除Div中的最後一個元素[JavaScript]

回答

相關問題