Javascript 使用DIV中的按钮删除DIV_Javascript_Html_Css

Javascript 使用DIV中的按钮删除DIV

javascript html css

Javascript 使用DIV中的按钮删除DIV,javascript,html,css,Javascript,Html,Css,我有以下代码，它向TextBoxContainer div添加了一个新的TextBox和两个新的“按钮” <div id="TextBoxContainer" style=""> <div class="input-group"> <textarea rows="2" name="DynamicTextBox" class="form-control" value="" aria-describedby="Tb"></textar

我有以下代码，它向TextBoxContainer div添加了一个新的TextBox和两个新的“按钮”

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

要清除（删除）新添加的DIV-textbox和按钮？

只需调用

DIV.parentNode.remove（）

删除该节点

函数AddTextBox（）{
var div=document.createElement（'div'）；
div.innerHTML=GetDynamicTextBox（“”）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
}
函数GetDynamicTextBox（值）{
返回“”+
'' +
“RemoveTextBox”+
“AddTextBox”+
''
}
函数RemoveTextBox（div）{
div.parentNode.remove（）；
}


添加文本框

只需调用

div.parentNode.remove（）

删除该节点

函数AddTextBox（）{
var div=document.createElement（'div'）；
div.innerHTML=GetDynamicTextBox（“”）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
}
函数GetDynamicTextBox（值）{
返回“”+
'' +
“RemoveTextBox”+
“AddTextBox”+
''
}
函数RemoveTextBox（div）{
div.parentNode.remove（）；
}


添加文本框

remove

函数的问题在于，您试图通过获取

deleteButton

的

parentNode

来

removeChild

。delete按钮的

parentNode

不是

TextBoxContainer

的直接子级，因此它用于抛出下面的错误，这是不言自明的

Uncaught NotFoundError:未能在“节点”上执行“removeChild”：节点要删除的节点不是此节点的子节点。

因此，在下面的方法中，您使用

document.createElement

创建一个新的

div

，使用

setAttribute

将

类

输入组

添加到特定的

div

，然后它将是

TextBoxContainer

的直接子级

function AddTextBox() {
    var div = document.createElement('DIV');
    div.setAttribute('class',"input-group");
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("TextBoxContainer").appendChild(div);
}

function GetDynamicTextBox(value) {
      return  '<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>'
}

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

函数AddTextBox（）{
var div=document.createElement（'div'）；
div.setAttribute（“类”，“输入组”）；
div.innerHTML=GetDynamicTextBox（“”）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
}
函数GetDynamicTextBox（值）{
返回“”+
'' +
'' +
''
}
函数RemoveTextBox（div）{
document.getElementById（“TextBoxContainer”）.removeChild（div.parentNode）；
}

remove