JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<button>Add fries to lunch</button>
<button>Add cheese to sandwich</button>
<button>Remove pickles</button>
<h3>My Lunch</h3>
<ul id="lunch">
    <li>
        <h4>My sandwich</h4>
	</li>
    <li>Bread</li>
    <li id="pickles">Pickles</li>
    <li id="Beef">Beef</li>
    <li>Mayo</li>
    <li>Bread</li>
</ul>

CSS

button {
    padding: 15px 20px;
    text-transform: capitalize;
    border: 2px solid red;
    background: transparent;
}

button:hover {
  background: red;
  border: none;
  color: white;
}

JavaScript

var lunch = document.querySelector("#lunch");
var btn = document.querySelectorAll("button");

var addFries = function() {
	var fries = document.createElement("div");
	fries.innerHTML = '<li><h4>Fries</h4></li>';
	//adding to lunch fries
	lunch.appendChild(fries);
}

var addCheese = function() {
	var beef = document.querySelector("#Beef");
	var topSlice = document.createElement("li");
	var bottomSlice = document.createElement("li");

	//adding to topSlice and bottomSlice text inside
	topSlice.innerHTML = bottomSlice.innerHTML = 'Cheese';
	beef.parentNode.insertBefore(topSlice, beef);
	beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
}

var removePickles = function() {
	var pickle = document.querySelector("#pickles");
	if(pickle) {
		pickle.parentNode.removeChild(pickle);
	}
}

btn[0].addEventListener("click", addFries);
btn[1].addEventListener("click", addCheese);
btn[2].addEventListener("click", removePickles);