Получение позиции указания элемента из localStorage

Question

Получение позиции указания элемента из localStorage

1

Я работаю над простым приложением, основанным на localStorage, и у меня проблема с удалением элемента.

Итак, я добавляю новые элементы в LS и отображаю их как divs in for loop. Я создал легкую кнопку "X" на каждой карте, и вот что. Как я могу получить ID/позицию этой конкретной карты после нажатия "X" и передать ее для удаления функции?

Я представлю вам свой код:

// Display activities 

var fetchActivities = function() {

  var activities = JSON.parse(localStorage.getItem("activitie"));

  const actCountContainer = document.getElementById("actCountContainer");
  actCountContainer.innerHTML = "";
  actCountContainer.innerHTML += "<div class='col-md-12'>" +
                        "<p>Your activities ("+activities.length+")";

  var actCardContainer = document.getElementById("actCardContainer");
  actCardContainer.innerHTML = "";

  for (let i = 0; i < activities.length; i++) {
      actCardContainer.innerHTML += '<div class="col-md-4">'+
                                    '<div class="card">' +
                                    '<div class="card-block">' +
                                    '<div id="remove" class="remove">X</div>' +
                                    '<h4 class="card-title">'+ activities[i].name + '</h4>' +
                                    '<ul class="card-text">' +
                                    '<li>Total time spent: 2h 25min 34sec</li>' +
                                    '</ul>' +
                                    '<a href="#" class="btn btn-primary">Go to this activity</a>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>'
  }

      const removeButton = document.getElementById("remove");
      if (removeButton) {
        removeButton.addEventListener("click", removeActivity);
      };
};


// Add activity function

var addActivity = function() {
  const actInput = document.getElementById("activityInput").value;

  // Main activity object

  var activity = {
      name: actInput
  };

  if (localStorage.getItem("activitie") == null) {
      var activities = [];
      activities.push(activity);
      localStorage.setItem("activitie", JSON.stringify(activities));
  } else {
      var activities = JSON.parse(localStorage.getItem("activitie"));
      activities.push(activity);
      localStorage.setItem("activitie", JSON.stringify(activities));
  }

  fetchActivities();
};

// Remove activity function

var removeActivity = function() {

};

const addButton = document.getElementById("addBtn");
addButton.addEventListener("click", addActivity);

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

Kacper T 03 июнь 2017, в 09:51

Источник

Теги:

javascript

function

local-storage

1 ответ

Ещё вопросы

Olga · Accepted Answer · 2017-06-03T07-32-00.000Z

Я бы переписал fetchActivities следующим образом

var fetchActivities = function() {        
    var activities = JSON.parse(localStorage.getItem("activitie"));
    const actCountContainer = document.getElementById("actCountContainer");
    actCountContainer.innerHTML = "";
    actCountContainer.innerHTML += "<div class='col-md-12'>" +
        "<p>Your activities ("+activities.length+")";

    const actCardContainer = document.getElementById("actCardContainer");
    actCardContainer.innerHTML = "";

    let items = "";

    for (let i = 0; i < activities.length; i++) {
        itemsHTML += '<div class="col-md-4">'+
            '<div class="card" data-id="' + activities[i].id + '">' +
            '<div class="card-block">' +
            '<div class="remove" data-id="' + activities[i].id + '">X</div>' +
            '<h4 class="card-title">'+ activities[i].name + '</h4>' +
            '<ul class="card-text">' +
            '<li>Total time spent: 2h 25min 34sec</li>' +
            '</ul>' +
            '<a href="#" class="btn btn-primary">Go to this activity</a>' +
            '</div>' +
            '</div>' +
            '</div>'
    }

    actCardContainer.innerHTML = items;

    // ... for attach event read on
};

Заметки:

Не устанавливайте один и тот же идентификатор, если элемент появляется много раз
Устанавливать innerHTML один раз не для каждой итерации цикла
Установите уникальный идентификатор для каждого элемента (например, вы можете генерировать случайные числа)

Чтобы присоединить события, вам нужно будет сделать это следующим образом (взято из вопроса):

var removeLink = document.querySelectorAll('.remove');

Затем вы будете использовать цикл:

for (var i = 0; i < deleteLink.length; i++) {
    removeLink[i].addEventListener('click', function(event) {
        var acrtivityId = event.currentTarget.getAttribute('data-id');

        removeActivity(acrtivityId);
        // Use 
    });
}

Теперь для удаления вы можете найти текущую активность в массиве действий и удалить ее. Используйте find а затем splice например. И сохраните массив изменений в локальном хранилище. При создании присвойте идентификатор.

Спасибо за ваш ответ. Это было действительно полезно, и, наконец, мне удалось решить эту проблему.