JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Milk <button class="delete"> Delete</button></li>
  <li>Tea  <button class="delete"> Delete</button></li>
  <li>Curd <button class="delete"> Delete</button></li>
</ul>

<button id="add">
 Add cheese
</button>

CSS

ul{
  list-style:none;
}

ul li{
  margin:5px 0px;
}
.delete{
  background:red;
  border:none;
  padding:5px;
  color:white;
  position:relative;
  left:12px;
}

JavaScript

var elements = document.getElementsByClassName('delete');
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function1, true);
}

var elementCheese = document.getElementById('add');
elementCheese.addEventListener('click', function2);

function function1(){
console.log("i am clicked");
this.parentNode.style.display = 'none';
}

function function2(){
	const newList = document.createElement('li');
  newList.innerText = 'Cheese';
  const deleteButton = document.createElement('button');
  deleteButton.setAttribute('class', 'delete');
  deleteButton.innerText += 'Delete';
  newList.appendChild(deleteButton);
  document.getElementsByTagName('ul')[0].appendChild(newList);
/*   document.getElementsByTagName('ul')[0].appendChild(); */
}