Duplicate Div - 刪除選項可防止額外的DIV複製

我是新來的使用JavaScript，並且遇到了一些我正在尋找代碼來複制DIV的牆。我發現下面的代碼：Duplicate Div - 刪除選項可防止額外的DIV複製

<html> 
<body> 
<form name="myform"> 
<input type="button" value="Click here" onclick="duplicate()"> 

<div id="original"> 
    duplicate EVERYTHING INSIDE THIS DIV 
</div> 

<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV 
<input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'"> 
</div> 

<script> 
var i = 0; 
var original = document.getElementById('duplicater'); 

function duplicate() { 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "duplicater" + ++i; 
    // or clone.id = ""; if the divs don't need an ID 
    original.parentNode.appendChild(clone); 
} 

</script> 
</body> 
</html>

這工作得很好。我添加了一個Remove Div按鈕，因此如果用戶決定添加一個Div，他們可以選擇刪除它。但是，在測試中，我發現如果用戶將除去Div一直回到第一個Div，則不會顯示任何進一步的Duplicate Div。所以用戶將不得不重新啓動頁面。爲了解決這個問題，我試圖包含一個IF ... ELSE。

<html> 
<body> 
<form name="myform"> 
<input type="button" value="Click here" onclick="duplicate()"> 

<div id="original"> 
    duplicate EVERYTHING INSIDE THIS DIV 
</div> 

<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV 
<input type="button" value="Remove Div" onclick="this.parentNode.style.display  = 'none'"> 
</div> 

<script> 
var i = 0; 
var original = document.getElementById('duplicater'); 

function duplicate() { 
if (document.getElementById("duplicater")=="none") 
{ 
document.getElementById("duplicater")=""; 
} 
else 
{ 
var clone = original.cloneNode(true); // "deep" clone 
clone.id = "duplicater" + ++i; 
// or clone.id = ""; if the divs don't need an ID 
original.parentNode.appendChild(clone); 
} 
} 

</script> 

</body> 
</html>

但是，這是行不通的。我完全承認自己不是編碼大師，如果它只是一個簡單的語法問題，不會感到驚訝，但任何與此相關的觀點都會被很好的接受。

來源

2013-05-07 BDUB

你的問題是在這裏：

this.parentNode.style.display = 'none'

這是設置父節點（form）爲不顯示（這是不一樣的移除）。你想要做的是找到父節點的lastChild並將其刪除。

來源

2013-05-07 01:31:58

太棒了，謝謝 – BDUB 2013-05-07 03:42:33

馬特有你的答案，我分心，所以這裏是一個遲到的迴應。在您的代碼中：

> <input type="button" value="Remove Div" onclick="this.parentNode.style.display = 'none'">

不「刪除」該節點，它只是隱藏它。要刪除的節點：

<input type="button" value="Remove Div" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">

另外：

> if (document.getElementById("duplicater")=="none")

的getElementById傳回與匹配的ID DOM節點，或空如果不存在一個。兩者都不會等同於字符串「none」，因此上述將始終返回false。這是一件好事，因爲在該行：

> document.getElementById("duplicater")=""

你將試圖分配給空或DOM元素，這兩者都是不允許的。如果左側評估結果爲null，則會導致錯誤。如果它解析爲DOM元素，任何事情都可能發生（因爲主機對象可以做他們喜歡的事情），但可能會導致錯誤。

來源

2013-05-07 05:55:45 RobG

Duplicate Div - 刪除選項可防止額外的DIV複製

回答

相關問題