Divの最後の要素を削除する[JavaScript]

Question

私は奇妙な問題を抱えています。私はdivをbodyの中に追加して削除するプログラムを作ろうとしています。 divを追加するには、document.getElementById("body").innerHTMLを使用します。追加はうまく動作します。しかし、削除関数では、 "body" idを変数に置き換えて、削除するdivのIDに置き換えます。しかし、コードを実行すると、 "innerHTMLをnullに設定できません"というエラーが表示されます。 id変数を固定ローカル変数に置き換えようとしましたが、うまくいきました。私も変数に引用符を追加しようとしましたが、どちらもうまくいきませんでした。 idを変更する変数に設定できない理由はありますか？ありがとう。正しいIDを取得するために削除しているときにi-1を使用する必要がありますので、あなたはdiv要素を追加した後、私をインクリメントしている

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>

Answer 1

：

は、ここに私のコードです。

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>

Answer 2

最後の子を削除するには、あなたも、CSSセレクタlast-childを使用することができます。新しく追加されたdivに特定のクラスを追加して、新しく追加されたdivだけを削除する必要があります。

これにより、iの依存関係も削除されます。

アドオンとして、innerHTMLの代わりにdocument.createElement + Node.appendChildを使用することもできます。 .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)"を参照することができます。