Блог

Главная - Вопросы по программированию - родительский узел не определен после удаления последнего элемента

родительский узел не определен после удаления последнего элемента

#javascript #null

#javascript #null

Вопрос:

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

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

любой совет относительно того, что здесь происходит?

 var input = document.getElementById("boxInput");
var output = document.getElementById("output")
var submit = document.getElementById("submit")
var i = 0;

function addElement(parentId, elementTag, elementId, html) {
    var output = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
    output.appendChild(newElement)
}

function removeElement(elementId) {
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}

var itemId = 0;

function additem() {
    i  = 1
    itemId  ;
    const btn = document.createElement("button");
    btn.onclick = function() {}
    var html = i   ". "   input.value   " "   `<button onclick="javascript:removeElement('item-'   itemId   ''); return false;">X</button>`;
    addElement("output", "p", ("item-"   itemId), html);
    return itemId
}


submit.addEventListener("click", additem);  
 #box {
    margin:auto;
    border-width: 3px;
    border-radius:5px;
    border-color:black;
    border-style:solid;
    width:300px;
    height:100px;
    margin-top:200px;
    line-height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#boxInput {
    width:150px;
    text-align:center;
    margin-right:5px;
   
}

#output {
    
    margin-top:20px;
    width:100%;
    text-align:center;
}

h1 {
    margin:center;
    text-align:center;
    position:relative;
    top:190px;
}

.delete {
    margin-left:5px;
}  
 <h1>To Do List!</h1>
<div id="box">
    <input id="boxInput" placeholder="add an item"/>
    <button id="submit">Submit</button>
</div>
<div id="output">
</div>

Ответ №1:

Нет необходимости itemId или что-то в этом роде. Просто создайте div для каждого элемента todo. Добавьте <button> <span> к нему и . Добавьте прослушиватель событий к кнопке, в которой вы удаляете весь todo div из output элемента 

 var input = document.getElementById("boxInput");
var output = document.getElementById("output")
var submit = document.getElementById("submit")


function additem() {
    const todo = document.createElement('div');
    const btn = document.createElement('button');
    btn.innerHTML = "Remove"
    const text = document.createElement('span');
    text.innerHTML = input.value;
    todo.appendChild(text);   
    todo.appendChild(btn);

    btn.addEventListener('click', (e) => {
      output.removeChild(todo)
    })
    
    output.appendChild(todo)
}


submit.addEventListener("click", additem);  
 #box {
    margin:auto;
    border-width: 3px;
    border-radius:5px;
    border-color:black;
    border-style:solid;
    width:300px;
    height:100px;
    margin-top:200px;
    line-height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#boxInput {
    width:150px;
    text-align:center;
    margin-right:5px;
   
}

#output {
    
    margin-top:20px;
    width:100%;
    text-align:center;
}

h1 {
    margin:center;
    text-align:center;
    position:relative;
    top:190px;
}

.delete {
    margin-left:5px;
}  
 <h1>To Do List!</h1>
<div id="box">
    <input id="boxInput" placeholder="add an item"/>
    <button id="submit">Submit</button>
</div>
<div id="output">
</div>