Создание кнопки закрытия с JS?

Question

Проблема: Я пытаюсь создать кнопку закрытия и добавить ее в конец динамического списка c. Это принципиально неправильный подход?

Функция : пользователь щелкает по нему, и элемент списка проходит. Вот как выглядит код: myList - это идентификатор списка, который я определяю в html:

Код:

    var myNodelist = document.getElementById("myList");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      var span = document.createElement("SPAN");
      var txt = document.createTextNode("\u00D7");
      span.className = "close";
      span.appendChild(txt);
      myNodelist[i].appendChild(span);

edit: I пошел вперед и попробовал маршрут ID, как показано выше. Это не работает.

FWIW вот мой css для кнопки закрытия

.close {
    background-color: #f44336;
  }

.close:hover {
    background-color: #f44336;
    color: white;
}

Answer 1

Вы можете просто получить родительский элемент и добавить кнопку, используя jquery как:

 $("#parent-div").append("<button class="button-create">Created Button</button>");

Answer 2

Вы можете добавить span (close button) при создании li и добавить прослушиватель событий в span, чтобы закрыть li. Вам не нужно перебирать список li и добавлять кнопку закрытия.

Пример

function addItem() {
    var ul = document.getElementById("myList");
    var candidate = document.getElementById("listInput");
    var li = document.createElement("li");
    li.setAttribute('id', candidate.value);
    li.appendChild(document.createTextNode(candidate.value));

    var span = document.createElement("span");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    span.addEventListener('click', () => {
        li.remove();
    });

    li.appendChild(span);
    ul.appendChild(li);
}

.close {
        display: inline-block;
        padding: 0px;
        background: red;
        margin-left: 13px;
        width: 20px;
        text-align: center;
        cursor: pointer;
    }
    
    ul {
        list-style: none;
    }
    
    li {
        padding: 3px;
        margin-bottom: 5px;
    } .close {
        display: inline-block;
        padding: 0px;
        background: red;
        margin-left: 13px;
        width: 20px;
        text-align: center;
        cursor: pointer;
    }

<div id="div1" class="header">
    <h2>My To Do List</h2>
    <button onclick="addItem()" class="addBtn" title="Click on me to add the item">+ Add +</button>
    <input type="text" id="listInput" placeholder="Type here">
</div>
<!--list begins-->
<ul id="myList"> </ul>