How to delete a textfield in javascript

Question

Here is my code. After I click "add" button it generate a new textfield, and I want to delete new textfield if I don't need it. But I don't know how to do it.

<body>

<form>
Quiz name: <input type="text" name="firstname"><br>
Question name: <input type="text" name="lastname">
</form>

Choice<input type="text" name="textBox0"><input type="button" value="add" onclick="addInput()"/>

<span id="responce"></span>
<script>
var countBox =1;
var boxName = 0;
function addInput()
{
     var boxName="textBox"+countBox; 
document.getElementById('responce').innerHTML+='<br/>Choice<input type="text" id="'+boxName+'"  /><input type="button" value="add" onclick="addInput()"/><input type="button" value="delete" onclick="deleteInput()"/>';
     countBox += 1;

}
function deleteInput()
{
    document.getElementById('responce').innerHTML+='choice';    
}
</script>

Code example

Elements should be generated with createElement (https://developer.mozilla.org/en-US/docs/Web/API/document.createElement) and deleted for example removeChild — Esko, Jul 09 '14 at 06:54

score 0 · Answer 1 · answered Jul 09 '14 at 07:05

Maybe this code can help you, but you are not creating element right. I add container with id and you can delete container on click delete.

<body>

<form>
Quiz name: <input type="text" name="firstname"><br>
Question name: <input type="text" name="lastname">
</form>

Choice<input type="text" name="textBox0"><input type="button" value="add" onclick="addInput()"/>

<span id="responce"></span>
<script>
var countBox =1;
var boxName = 0;
function addInput()
{
    var boxName="textBox"+countBox; 
    var contName="contBox"+countBox; 
    document.getElementById('responce').innerHTML+='<div id="'+contName+'"><br/>Choice<input type="text" id="'+boxName+'"  /><input type="button" value="add" onclick="addInput()"/><input type="button" value="delete" onclick="deleteInput('+contName+')"/></div>';
     countBox += 1;

}
function deleteInput(id)
{
   id.remove();
}
</script>    



</body>

Code example

FYI element.remove() isn't valid JavaScript and only works in certain browsers such as Chrome. You can't trust browser's remove function, so you have to use a function like in my post. — Nicolas Henrard, Jul 09 '14 at 07:19

score 0 · Answer 2 · answered Jul 09 '14 at 07:11

Here is a solution.

JSFiddle: http://jsfiddle.net/KJa36/7/

HTML:

<form>Quiz name:
    <input type="text" name="firstname" />
    <br/>Question name:
    <input type="text" name="lastname" />
</form>Choice
<input type="text" name="textBox0">
<input type="button" value="add" onclick="addInput()" />
<span id="responce"></span>

JavaScript:

//From: http://stackoverflow.com/questions/3387427/javascript-remove-element-by-id
Element.prototype.remove = function () {
    this.parentElement.removeChild(this);
};
NodeList.prototype.remove = HTMLCollection.prototype.remove = function () {
    for (var i = 0, len = this.length; i < len; i++) {
        if (this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
};

var countBox = 1;
var boxName = 0;

function addInput() {
    var boxName = "textBox" + countBox;
    var divName = "Div_" + countBox;
    document.getElementById('responce').innerHTML += '<br/><div id="' + divName + '"> Choice<input type="text" id="' + boxName + '"  /><input type="button" value="add" onclick="addInput()"/><input type="button" value="delete" onclick="deleteInput(' + divName + ')"/></div>';
    countBox += 1;

}

function deleteInput(param_divName) {
    document.getElementById('responce').innerHTML += 'choice';
    document.getElementById(param_divName.id).remove();
}

As already explained, it's better to create elements by the document.createElement statement.

DineshKP · Answer 3 · 2020-08-17T05:05:26.657

I believe you are just starting to learn javascript, so I will give a detailed answer for your understanding.

you can easily remove element using the remove().

document.getElementById("#foo").remove();

Lets see how we can use that in our scenario. Your code has the following,

<input type="text" name="textBox0">
<input type="button" value="add" onclick="addInput()"/>
<input type="button" value="delete" onclick="deleteInput()"/>

One text type input element for user's input and tow button type input element which triggers a add and delete javascript functions to add/remove the text input and button input.

this is a javascript keyword that holds the reference of the current object. We'll pass that as a parameter to our deleteInput() so in our function we know which element we are dealing with.

<input type="button" value="delete" onclick="deleteInput(this)"/>

Now in our function we'll receive that parameter as self. Our function now knows that it is dealing with the delete button input element. Simply call remove() on self.

function deleteInput(self) {
    //code to remove element
    self.remove();
}

But running that code will only remove the delete button. The reason being we are not telling the deleteInput() method we need to remove the text input and the other add button input as well. There is no way by which we can pass the reference of the other 2 input elements so what do we do?

Lets wrap our Input elements within a div

<div>
    <input type="text" name="textBox0">
    <input type="button" value="add" onclick="addInput()"/>
    <input type="button" value="delete" onclick="deleteInput()"/>
</div>

parentElement() method gives back a reference to the parent of the element you call it upon, so calling self.parentElement() will give you the div's reference.

With that you can remove the entire div which accomplishes your goal.

function deleteInput(self) {
    //code to remove element
    self.parentElement().remove();
}

Please find the code and preview here: http://plnkr.co/edit/ROs6YJe4XeJTPFr2NBUT?p=preview

How to delete a textfield in javascript

3 Answers3