javascriptで作成した特定の要素を削除するにはどうすればよいですか？

Question

私は自分で自分のために何かを作っていますので、コマンドを素早く簡単にスタックできます（Minecraftコマンドブロック作成用）。

私はすでに新しいテキストエリアを作成するためのボタンとそれらを削除するボタンを作成しました。いくつかのテキストエリアが作成されていると仮定すると、それらのすべての途中で特定のテキストボックスを削除するにはどうすればいいですか？

私は親として機能するdiv要素を持っていて、実際にはtextareas ANDボタンを正常に削除できました。私の問題は、ただ1つでも削除した後で、私はより多くを作成することができませんでした。箱の中のテキストが左にシフトすることに気付きました。

機能：私は、変数の猫を命名するので

function removeBox() { 
      var div = document.getElementById("newText"); 
      var cats = document.getElementsByClassName("tAC"); 
      var catss = document.getElementsByClassName("tACB"); 
      div.removeChild(cats[0]); 
      div.removeChild(catss[0]); 
     } 

私を判断してはいけません！ div：

<div id="newText"> 
    <textarea class="tAC" id="firstText"></textarea> 
    <p></p> 
</div> 

アイデアをお持ちですか？

Answer 1

あなたが投稿したもので、私はこれを提案しています。

新しいtextareaが作成されるたびに、textareaを保持するdiv内に新しいbuttonを作成します。この方法で削除ボタンをクリックすると、event.targetを使用してイベントを送出したボタン要素を取得できます。event.target.previousSiblingを使用してtextareaを見つけ出し、にremoveChildを呼び出してDOMから削除できます。これがあなたが期待するものなのかどうかは分かりませんので、コードを共有しませんでした。

Answer 2

これは一例です：

HTML：

<div id="container"></div> 

JS：

var cont = document.getElementById("container"); 
cont.innerHTML += "<button id='b12' onclick='deleteMe("+'"b12"'+")'>b1b</button>"+ 
    "<button id='b22' onclick='deleteMe("+'"b22"'+")'>b2b</button>"+ 
    "<button id='b32' onclick='deleteMe("+'"b32"'+")'>b3b</button>"; 

window.deleteMe = function (elementId){ 
console.log("Borrando:", elementId); 
document.getElementById(elementId).remove(); 
}; 

これは、それがどのように見えるかです：fiddle

アイデアが識別できるようにすることです要素、つまり、必要な要素に対してidを設定するのはなぜですか操作することは非常に便利です。それがあなたに影響を与えることを願っています。

Answer 3

私はちょうどあなたのセットアップを試してみましたが、それがうまく動作しているようだ：ところで

function removeBox() { 
 
    var div = document.getElementById('new-text'); 
 
    var cats = document.getElementsByClassName("tAC"); 
 
    var catss = document.getElementsByClassName("tACB"); 
 

 
    var cats0 = cats[0]; 
 
    var catss0 = catss[0]; 
 
    
 
    div.removeChild(cats0); 
 
    div.removeChild(catss0); 
 
    } 
 

 
var button = document.getElementsByTagName('button')[0] 
 
button.addEventListener('click',removeBox,false);

#new-text { 
 
width: 200px; 
 
} 
 

 
#new-text p { 
 
display: inline-block; 
 
width: 100px; 
 
} 
 

 
#new-text .tAC { 
 
float: left; 
 
} 
 

 
#new-text .tACB { 
 
float: right; 
 
} 
 

 
button { 
 
clear: both; 
 
}

<div id="new-text"> 
 
<p class="tAC">cats0</p> 
 
<p class="tACB">catss0</p> 
 
<p class="tAC">cats1</p> 
 
<p class="tACB">catss1</p> 
 
<p class="tAC">cats2</p> 
 
<p class="tACB">catss2</p> 
 
</div> 
 

 
<button type="button" />Click Me</button>