我怎么能刪除我在javascript中創建的特定元素？

Question

我正在制作一些供我自己使用的東西，這將允許我快速輕松地堆疊命令（用於Minecraft命令塊創建）。

我已經創建了一個用於創建新textareas的按鈕和一個用於刪除它們的按鈕。 假設將創建幾個textareas，我怎么能刪除所有文本框中間的特定文本框（使用按鈕刪除它們）？

我有一個div元素作為父元素，實際上能夠成功刪除textareas AND按鈕。 我的問題是刪除即使只是一個，我無法創建更多。 我注意到方框中的文字會向左移動。

功能 ：

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 ，在div中創建一個包含textarea的新button 。 這樣，當單擊刪除按鈕時，您可以使用event.target來獲取調度事件的按鈕元素，然后您可以使用event.target.previousSibling查找textarea並通過在event.target.parentNode上調用removeChild將其從DOM中刪除event.target.parentNode 。 我不確定這是否是您所期望的，所以我沒有共享代碼。

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();
};

這就是它的樣子： 小提琴

我們的想法是能夠識別元素，這就是為您需要操作的元素設置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>