如何删除我在 javascript 中创建的特定元素？

Question

我正在制作一些供我自己使用的东西，它可以让我快速轻松地堆叠命令（用于 Minecraft 命令块创建）。

我已经创建了一个用于创建新文本区域的按钮和一个用于删除它们的按钮。假设将创建多个文本区域，我如何删除所有文本区域中间的特定文本框（使用删除按钮）？

我有一个 div 元素作为父元素，实际上能够成功删除文本区域和按钮。我的问题是即使只删除了一个，我也无法创建更多。我注意到框中的文本会向左移动。

函数：

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 并将其从DOM 通过在 event.target.parentNode 上调用 removeChild。我不确定这是否是您所期望的，所以我没有分享代码。

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>

如何删除我在 javascript 中创建的特定元素？

How could I delete a specific element that I have created in javascript?

javascript

html

removechild