Delete dynamically created fields with Javascript

Question

I have a function to create dynamic fields when user wants to add more fields:

function addNewField()
{
    var newTextField = document.createElement('input');
    newTextField.type = 'text';
    newTextField.name = 'textInput';

    var newDeleteButton = document.createElement('input');
    newDeleteButton.type = 'button';
    newDeleteButton.value = "Delete";
    newDeleteButton.name = 'deleteTextInput';

    var newLine = document.createElement('br');

    document.getElementById('inputs').appendChild(newTextField);
    document.getElementById('inputs').appendChild(newDeleteButton);
    document.getElementById('inputs').appendChild(newLine);
}

It works fine, however, I have to make it so that the Delete button removes the textbox associated with it (along with the delete button itself). How do I do that? Thanks!

try looking at the various solutions already posted -> https://stackoverflow.com/questions/7561277/remove-an-element-from-the-dom-from-reference-to-element-only — daddygames, Sep 04 '18 at 17:43
@ChrisCousins All the fields have the same id/name though, isn't that gonna be a problem? — user10316378, Sep 04 '18 at 17:45

score 0 · Answer 1 · answered Sep 04 '18 at 17:46

0

Here's sample syntax for how to remove an element by using that elements id

    function remove(id){
                let elem = document.getElementById(id);
                elem.parentNode.removeChild(elem);
            }

answered Sep 04 '18 at 17:46

Nick Dima

348
1
10

score 0 · Answer 2 · answered Sep 04 '18 at 17:46

add a click event on the newDeleteButton button and use removeChild, like this:

    newDeleteButton.addEventListener ('click', function () {
     document.getElementById ('inputs'). removeChild (newTextField);
     document.getElementById ('inputs'). removeChild (newDeleteButton);
     document.getElementById ('inputs'). removeChild (newLine);
});

score 0 · Accepted Answer · answered Sep 04 '18 at 17:49

You can do it by using this and previousElementSibling twice (but keep reading):

function deleteHandler() {
    var br = this.previousElementSibling;
    var input = br.previousElementSibling;
    var parent = this.parentElement;
    parent.removeChild(this);
    parent.removeChild(br);
    parent.removeChild(input);
}

then

    newDeleteButton.addEventListener("click", deleteHandler);

Live Example:

document.getElementById("add").addEventListener("click", addNewField, false);
function addNewField()
{
    var newTextField = document.createElement('input');
    newTextField.type = 'text';
    newTextField.name = 'textInput';

    var newDeleteButton = document.createElement('input');
    newDeleteButton.type = 'button';
    newDeleteButton.value = "Delete";
    newDeleteButton.name = 'deleteTextInput';
    newDeleteButton.addEventListener("click", deleteHandler);

    var newLine = document.createElement('br');

    document.getElementById('inputs').appendChild(newTextField);
    document.getElementById('inputs').appendChild(newDeleteButton);
    document.getElementById('inputs').appendChild(newLine);
}
function deleteHandler() {
    var br = this.previousElementSibling;
    var input = br.previousElementSibling;
    var parent = this.parentElement;
    parent.removeChild(this);
    parent.removeChild(br);
    parent.removeChild(input);
}

<div id="inputs"></div>
<input type="button" id="add" value="Add">

But, I wouldn't; it's fragile. Instead, I'd get rid of the br and put both the text and button in a div, then just remove the div:

function deleteHandler() {
    var br = this.previousElementSibling;
    var input = br.previousElementSibling;
    var parent = this.parentElement;
    parent.removeChild(this);
    parent.removeChild(br);
    parent.removeChild(input);
}

then

    newDeleteButton.addEventListener("click", deleteHandler);

Live Example:

document.getElementById("add").addEventListener("click", addNewField, false);
function addNewField()
{
    // *** Div to contain them
    var div = document.createElement("div");
    
    var newTextField = document.createElement('input');
    newTextField.type = 'text';
    newTextField.name = 'textInput';

    var newDeleteButton = document.createElement('input');
    newDeleteButton.type = 'button';
    newDeleteButton.value = "Delete";
    newDeleteButton.name = 'deleteTextInput';
    newDeleteButton.addEventListener("click", deleteHandler);
    
    // *** Put them in the div
    div.appendChild(newTextField);
    div.appendChild(newDeleteButton);

    // *** Add the div
    document.getElementById('inputs').appendChild(div);
}
function deleteHandler() {
    var parent = this.parentElement;
    parent.parentElement.removeChild(parent);
}

<div id="inputs"></div>
<input type="button" id="add" value="Add">

Thanks, I used a
instead of
. Also, a question, what is the role of parentElement in here? — user10316378, Sep 04 '18 at 18:05
@user10316378 - An element has a property, `parentElement`, which refers to its parent in the DOM tree. So for instance, the delete button's parent element is the `div` (whose parent element is `#inputs`). — T.J. Crowder, Sep 04 '18 at 18:07

score 0 · Answer 4 · answered Sep 04 '18 at 17:49

0

Add these lines after newDeleteButton.name = 'deleteTextInput';:

newDeleteButton.addEventListener('click', function() {
    newTextField.remove();
    this.remove();
});

answered Sep 04 '18 at 17:49

Farahmand

2,731
1
24
27

score 0 · Answer 5 · answered Sep 04 '18 at 18:01

it's better that the input and button set in a "div" but you can add click event on delete button :

function addNewField()
{
var newTextField = document.createElement('input');
newTextField.type = 'text';
newTextField.name = 'textInput';

var newDeleteButton = document.createElement('input');
newDeleteButton.type = 'button';
newDeleteButton.value = "Delete";
newDeleteButton.name = 'deleteTextInput';
// ------ add click event to delete ------
newDeleteButton.addEventListener('click',function(e){
   var input = e.target.previousSibling;
   var br = e.target.nextSibling;
   e.target.parentNode.removeChild(e.target);
   input.parentNode.removeChild(input);
   br.parentNode.removeChild(br);
})

var newLine = document.createElement('br');

document.getElementById('inputs').appendChild(newTextField);
document.getElementById('inputs').appendChild(newDeleteButton);
document.getElementById('inputs').appendChild(newLine);
}

https://jsfiddle.net/hadies/f96xqsz0/80/

Delete dynamically created fields with Javascript

5 Answers5