JSFiddle - React, Tailwind, and code Playground

by Anchit Gupta

CSS

.button-container {
  width: 40px;
  height: 20px;
  background-color: green;
}

.remove-button {
  width: 60px;
  height: 20px;
  background-color: red;
}

.task {
  width: 50px;
  height: 20px;
  background-color: yellow;
  border: 1px solid;
  margin-right: 10px;
  padding: 5px;
  display: inline-block;
}

.task-elem-container {
  margin-bottom: 10px;
}

.task-container {
  margin-top: 20px;
}

JavaScript

var arr = [],
		index = 0;
function addTask() {
	var getInputVal = document.getElementById("custom-input").value;
  arr.push(getInputVal);
  var taskElem = document.createElement("div");
  taskElem.className = "task-elem-container";
  taskElem.innerHTML = "<span class='task'>" + getInputVal +"</span><button class='remove-button'>Remove</button>";
    taskElem.setAttribute("id", index);
  /* taskElem.setAttribute("onclick", "removeTask(" + this.value + ")");
  taskElem.onclick = function() {removeTask(this.value);}; */
  
  taskElem.addEventListener("click", removeTask.bind(null, index));
  taskContainer.appendChild(taskElem);
  divContainer.appendChild(taskContainer);
  console.log(arr);
  index++;
  document.getElementById("custom-input").value = "";
}

function removeTask(val) {
	var removeElem = document.getElementById(val);
removeElem.parentNode.removeChild(removeElem);
	console.log(val);
}

var divContainer = document.createElement("div");
divContainer.className = "todo-list-container";
/* divContainer.innerHTML = '<input id="custom-input"/>'; */
var inputElem = document.createElement("input");
inputElem.setAttribute("id", "custom-input");

var buttonElem =  document.createElement("button");
buttonElem.className = "button-container";
buttonElem.innerHTML = "Add";
buttonElem.setAttribute("onclick", "addTask()");
buttonElem.onclick = function() {addTask();};

var taskContainer = document.createElement("div");
taskContainer.className = "task-container";


divContainer.appendChild(inputElem);
divContainer.appendChild(buttonElem);
document.body.appendChild(divContainer);