我怎么能删除我在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>