JSFiddle - React, Tailwind, and code Playground
HTML
<button class="addButton">Add item</button>
<ul class="list"></ul>
JavaScript
const list = document.querySelector('.list');
const addButton = document.querySelector('.addButton');
let counter = 0;
function addItem() {
counter = counter +1;
const li = document.createElement('li');
const closeButton = document.createElement('button');
closeButton.innerHTML = 'x';
closeButton.classList.add('list__close');
li.innerHTML = `Item ${counter}`;
li.appendChild(closeButton);
list.appendChild(li);
}
function removeItem(e) {
if (e.target.classList.contains('list__close')) {
e.target.parentNode.remove();
}
}
list.addEventListener('click', removeItem);
addButton.addEventListener('click', addItem);