Removing DIV With Button Within A DIV

Question

I have the following Code that adds a new TextBox and two new "buttons" to the 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>

The following code is executed on AddTextBox event:

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

Which creates this HTML code:

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

How do I modify RemoveTextBox(this) on click event function:

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

In order to clear(remove) the newly added DIV - textbox and buttons?

Answer 1

You just need to call div.parentNode.remove(); to remove that node.

 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

The problem with your remove function was you were trying to removeChild of TextBoxContainer by getting parentNode of deleteButton . The parentNode of delete button was not direct child of TextBoxContainer and hence it used to throw below error which is self-explanatory.

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

So below approach where you create a new div with document.createElement , add a class - input-group to that particular div using setAttribute and then it would be direct child of 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);
}