Как удалить элемент по клику на нём?

Question

[alex_643]

Код записывает введённый текст в JSON массив . По клику элемент должен удаляться везде и в массиве и в localStorage и на экране, но он не удаляется на экране . Удаляется только после перезагрузки страницы .

tdList = [];
if (localStorage.length > 0){
    tdList = JSON.parse(localStorage.getItem('tasks'));
}else{
    tdList = [{'task': 'alex_che.js'}];
    localStorage.setItem('tasks', JSON.stringify(tdList));
}
tdList = JSON.parse(localStorage.getItem('tasks'));
function show(){
    for(var key in tdList){
        var out = '';
        out += JSON.parse(localStorage.getItem('tasks'))[key].task;
    }
    if (out.length > 0){
        $('<li>', {text: out}).appendTo('#out');
        $('li').addClass('tdItem');
    }
}
for(var key in tdList){
    var out = '';
    out += JSON.parse(localStorage.getItem('tasks'))[key].task;
    $('<li>', {text: out}).appendTo('#out');
    $('li').addClass('tdItem');
}
document.getElementById('tdIn').onkeydown = function(e){
    if (e.keyCode != 13){
        return;
    }else{
        var temp = {};
        temp.task = document.getElementById('tdIn').value;
        temp.check = false;
        var l = tdList.length;
        tdList[l] = temp;
        localStorage.setItem('tasks', JSON.stringify(tdList));
        console.log(tdList);
        document.getElementById('tdIn').value = '';
        show()
    }
}
$('.tdItem').on('click', function(e){
    //if (!e.shiftKey) return;
    var i = tdList.findIndex(elem => elem.task === $(e.target).text());
    tdList.splice(i, 1);
    $(e.target).remove();
    localStorage.setItem('tasks', JSON.stringify(tdList));
});

Comments

[alex_643]

Pardon Me! Where Do I Find 4giveness?, все работает . Может нужен HTML?

[Сергей Соколов]

попробуйте вместо $(e.target).remove();
написать $(this).remove();

[Yustas Alexu]

Зачем такая простыня? Там всего пара строк кода нужна.

Answer 1

[Сергей Соколов]

Переписал ваш код.
При каждом обновлении массива, перерисовывать весь список заново:


Можно вынести в функцию отрисовку и обновление в LS массива задач – это вызывается и при добавлении и при удалении задачи.

В элементы списка добавил data-атрибут, чтобы однозначно идентифицировать его при клике.