Getting position of specifing item from localStorage

Question

I'm working on a simple aplication based on localStorage and I have a problem with removing an item.

So, I'm adding new items to LS and display them as divs in for loop. I created an easy "X" button on every card and here is a thing. How can I get an ID/position of this specific card after clicking "X" and pass it to remove function?

I'll present you my code:

// 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);

I'd be very grateful if you can give me an idea how can I handle this remove function.

I would suggest using `createElement` or something similar rather just appending to `innerHTML` so that you can bind the `addEventListener` to the remove div as you create it. This will mitigate the issue of having more than one element with the same `id` — haxxxton, Jun 03 '17 at 07:41

score 0 · Accepted Answer · answered Jun 03 '17 at 10:30

I would rewrite fetchActivities as follows

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
};

Notes:

Do not set the same id if an element appears many times
Set innerHTML once not for each loop iteration
Set unique id for every item (you could generate random numbers for example)

To attach events you would need to do it as follows (taken from question ):

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

Then you would loop:

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

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

Now for the removal you can find current activity in the activity array and remove it. Use find and then splice for example. And save the change array to local storage. On creation assign an id.

Thank you for your answer. It was really helpful and finally I managed to solve this problem. — , Jun 03 '17 at 13:04

Getting position of specifing item from localStorage

1 Answers1