JSFiddle - React, Tailwind, and code Playground

by Khajan Singh

HTML

<button onclick="addItem()">
Add
</button>
<ul>
<li><span>Text</span> 
<button onclick="removeItem()">
Remove
</button></li>
</ul>

JavaScript

window.addItem = function addItem(){
	var fragment = document.createDocumentFragment();
  var li = document.createElement('li');
  var span = document.createElement('span');
  span.innerText = 'ABC';
  var button = document.createElement('button');
  button.innerText = 'Remove';
  button.onclick = removeItem;
  li.appendChild(span);
  li.appendChild(button);
  fragment.appendChild(li)
  document.getElementsByTagName('ul')[0].appendChild(fragment);
}
window.removeItem = function removeItem(){
	if(!this.parentNode){
  	document.getElementsByTagName('li')[0].remove();
  }else{
  	this.parentNode.remove();
  }
}