Question

我有以下代码添加了一个新的TextBox和两个新的＆＃34;按钮＆＃34;到TextBoxContainer div。

<div id="TextBoxContainer" style="">
    <div class="input-group">
        <textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb"></textarea>
        <span class="input-group-addon glyphicon glyphicon-plus" id="Tb" onclick="AddTextBox()"></span>
    </div>
</div>

以下代码在AddTextBox事件上执行：

function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("TextBoxContainer").appendChild(div);
}

function GetDynamicTextBox(value) {
    return  '<div class="input-group">' +
    '<textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb1 Tb2"></textarea>' +
    '<span class="input-group-addon glyphicon glyphicon-minus" id="Tb1" onclick="RemoveTextBox(this)"></span>' +
    '<span class="input-group-addon glyphicon glyphicon-plus" id="Tb2"  onclick="AddTextBox()"></span>' +
    '</div>'
}

创建此HTML代码：

<div id="TextBoxContainer" style="">
    <div class="input-group">
        <textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb"></textarea>
        <span class="input-group-addon glyphicon glyphicon-plus" id="Tb" onclick="AddTextBox()"></span>
    </div>

        <div class="input-group">
            <textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb1 Tb2">
            </textarea><span class="input-group-addon glyphicon glyphicon-minus" id="Tb1" onclick="RemoveTextBox(this)"></span>
            <span class="input-group-addon glyphicon glyphicon-plus" id="Tb2" onclick="AddTextBox()"></span></div>
       </div>
</div>

如何在点击事件功能上修改RemoveTextBox（this）：

function RemoveTextBox(div) {
    document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}

为了清除（删除）新添加的DIV - 文本框和按钮？

Answer 1

您只需致电div.parentNode.remove();即可删除该节点。

function AddTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicTextBox("");
document.getElementById("TextBoxContainer").appendChild(div);
}

function GetDynamicTextBox(value) {
return  '<div class="input-group">' +
'<textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb1 Tb2"></textarea>' +
'<span class="input-group-addon glyphicon glyphicon-minus" id="Tb1" onclick="RemoveTextBox(this)">RemoveTextBox</span>' +
'<span class="input-group-addon glyphicon glyphicon-plus" id="Tb2"  onclick="AddTextBox()">AddTextBox</span>' +
'</div>'
}

function RemoveTextBox(div) {
div.parentNode.remove();
}

<div id="TextBoxContainer" style="">
<div class="input-group">
<textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb"></textarea>
<span class="input-group-addon glyphicon glyphicon-plus" id="Tb" onclick="AddTextBox()">AddTextBox</span>
</div>
</div>

Answer 2

<强> DEMO

remove功能的问题在于您通过获取removeChild的{{1}}来TextBoxContainer parentNode。删除按钮的deleteButton不是parentNode的直接子项，因此它常常抛出错误，这是不言自明的。

未捕获NotFoundError：无法执行＆＃39; removeChild＆＃39;在＆＃39; Node＆＃39;：The 要删除的节点不是此节点的子节点。

以下是使用TextBoxContainer创建新div的方法，使用document.createElement向特定class添加input-group - div然后它将是setAttribute

的直接孩子

TextBoxContainer

使用DIV中的按钮删除DIV

2 个答案: