JSFiddle - React, Tailwind, and code Playground

by Hadi Eskandari

HTML

<button onclick="addNewField()">
add
</button>
<div id="inputs"></div>


<script>
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',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);
}

</script>