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时，请在包含button的div中创建新的textarea。这样，当点击删除按钮时，您可以使用event.target获取调度事件的按钮元素，然后您可以使用event.target.previousSibling查找textarea并将其从通过removeChild上的event.target.parentNode来调用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

我刚试过你的设置，它似乎工作正常：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我怎么能删除我在javascript中创建的特定元素？

3 个答案: