Удалить текущий элемент из массива в localStorage Java Script

Question

При добавлении комментария, он пушится в массив comments. При клике на крестик комментарий должен удаляться не только с сайта, но и с localStorage. Что надо добавить сюда для удаления:

let comments = [];
loadComments();

document.getElementById('comment-add').onclick = function() {
    event.preventDefault();
    let commentName = document.getElementById('coment-name');
    let commentBody = document.getElementById('coment-body');

    let comment = {
        name : commentName.value,
        body : commentBody.value,
        time : Math.floor(Date.now()/1000) 
    }

    commentName.value = '';
    commentBody.value = '';

    comments.push(comment);
    saveComments();
    showComments();
}
function saveComments() {
    localStorage.setItem('comments', JSON.stringify(comments));
}
function loadComments() {
    if (localStorage.getItem('comments')) comments = JSON.parse(localStorage.getItem('comments'));
    showComments();
}
function showComments() {
    let commentField = document.getElementById('comment-field');
    let out = '';
    comments.forEach(function(item) {

        out += `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="mr-auto">${item.name}</strong>
          <small class="text-muted">${timeConverter(item.time)}</small>
          <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="toast-body">
            ${item.body}
        </div>
      </div>`
    });
    commentField.innerHTML = out;
}
function timeConverter(UNIX_timestamp) {
    let a = new Date(UNIX_timestamp * 1000);
    let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Nov', 'Dec'];
    let year = a.getFullYear();
    let month = months[a.getMonth()];
    let date = a.getDate();
    let hour = a.getHours();
    let min = a.getMinutes();

    if (hour <= 9) {
        hour = '0' + hour;
    }
    if (min <= 9) {
        min = '0' + min;
    }
    let time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min;
    return time;
}
$('.close').on('click', function() {
    let parent = $(this).closest('.toast');
    parent.remove();
    comments.removeItem(parent);
});

Answer 1

Удаляйте из массива элемент с тем же индексом, что и DOM-элемент.

$('#comment-field').on('click', '.close', function() {
  let parent = $(this).closest('.toast');
  let index = $("#comment-field .toast").index(parent);
  comments.splice(index, 1);
  saveComments();
  parent.remove();
});

БЛОГ НА HUSL

Удалить текущий элемент из массива в localStorage Java Script

Ответы (1 шт):