Удалить элемент списка динамически

Question

Я планирую написать код JavaScript для списка дел, который динамически добавляет элементы в неупорядоченный список вместе с кнопкой удаления для каждого элемента. Когда пользователь нажимает на кнопку удаления, я хотел бы удалить соответствующий элемент списка. Как удалить указанный элемент списка динамически

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
button.addEventListener("click",function(){
    if((input.value.length)>0&&(input.value.includes("by")===true))
    {
        var li= document.createElement("li");
        li.appendChild(document.createTextNode(input.value + " "));
        ul.appendChild(li);
        input.value="";
        var nb= document.createElement("button");
        nb.appendChild(document.createTextNode("REMOVE"));
        li.appendChild(nb);
    }
    else if(input.value.includes("by")===false)
    {
        alert("Make Sure You Adhere to the Defined Format");
    }
});

Answer 1

Вы можете добавить обработчик onclick и по нажатию кнопки получить parentNode и использовать remove для его удаления

var button = document.querySelector("button");
var input = document.querySelector("input");
var ul = document.querySelector("ul");
button.addEventListener("click", function() {
  if ((input.value.length) > 0 && (input.value.includes("by") === true)) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value + " "));
    ul.appendChild(li);
    input.value = "";
    var nb = document.createElement("button");
    //nb.classList.add('remove');
    nb.onclick = removeThis; // added onclick handler
    nb.appendChild(document.createTextNode("REMOVE"));
    li.appendChild(nb);
  } else if (input.value.includes("by") === false) {
    alert("Make Sure You Adhere to the Defined Format");
  }
});


function removeThis() {
  this.parentNode.remove();
}

<ul></ul>
<input type='text'><button type='button'>Add</button>