0

私は JavaScript を使用するのが初めてで、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>

これは非常にうまく機能します。[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>

ただし、これは機能しません。私はコーディングの第一人者ではないことを完全に認めており、単純な構文の問題であっても驚かないでしょうが、これに関するあらゆる点は大いに受け入れられます.

4

2 に答える 2

0

あなたの問題はここにあります：

this.parentNode.style.display = 'none'

これは、親ノード ( form) を表示しないように設定しています (削除することとは異なります)。あなたがしたいことはlastChild、親ノードの to を見つけて削除することです。

于 2013-05-07T01:31:58.667 に答える