How can I add a delete button to an input display using only javascript?

Okay, before I ask my question, I have searched high and low for this answer and I’ve only come up with no-ended answers or jQuery answers. I am trying to do this using JAVASCRIPT ONLY. No other libraries.

I know I’m on the right track, but I just can’t figure out how to delete only the last entry of an input that I have created inside a div (all using js). So, how do I make a delete button actually delete only the input entry it is attached to?

I put my script in a jsbin. Any help would be greatly appreciated! Thank you in advance! (:

I guess I’m supposed to add my code here anyway so here it is:

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="">
<br/>
<br/>
Age: <input type="number" name="age">

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {
    var input = document.getElementsByTagName('input')[0].value;
    var agenum = document.getElementsByTagName('input')[1].value;
    var div = document.createElement('div');
    div.style.border = '2px solid red';
    div.style.padding = '10px';
    div.style.display = 'block';
    document.body.appendChild(div);
    var output = 'Name: ' + input + '<br/>' + 'Age: ' + agenum;
    div.innerHTML = output;
    deleteButton(div);
}

function deleteButton(x) {
    var del = document.createElement('button');
    del.style.textDecoration = 'none';
    del.innerHTML = 'Remove this person?';
    del.style.color = 'white';
    del.style.backgroundColor = 'blue';
    document.body.appendChild(del);
}


</script>

</body>
</html>

Answer

what you dont know is how to remove the div itself, you need to pass it to your deleteButton function and use removeChild to delete it. Similar to the delete button itself, this is a keyword here.

<!DOCTYPE html>
<html>
<body>

Name: <input type="text" id="myText" value="">
<br/>
<br/>
Age: <input type="number" name="age">

<button onclick="myFunction()">Try it</button>

<script>

function myFunction() {
  
    var input = document.getElementsByTagName('input')[0].value;
    var agenum = document.getElementsByTagName('input')[1].value;
    var div = document.createElement('div');
    div.style.border = '2px solid red';
    div.style.padding = '10px';
    div.style.display = 'block';
    document.body.appendChild(div);
  
    var output = 'Name: ' + input + '<br/>' + 'Age: ' + agenum;
    div.innerHTML = output;
    
    //create your delete button after you click try it
    var del = document.createElement('button');
    del.style.textDecoration = 'none';
    del.innerHTML = 'Remove this person?';
    del.style.color = 'white';
    del.style.backgroundColor = 'blue';
    //assign a function for it when clicked
    del.onclick = function() { deleteButton(div,this)}; 
    document.body.appendChild(del);
   <!--  deleteButton(div);  --> 
}

function deleteButton(x,y) {
	  
    var parent = document.getElementsByTagName("BODY")[0];
    //remove the div
    parent.removeChild(x);
    //remore the button
    parent.removeChild(y);
    
}


</script>

</body>
</html>

Advertisement

Answer