Question

I have a list of items, which has two values, a name and an id. Each list item is built using data extracted from a cookie. It also has a delete button, which basically looks at the HTML, and then removes that item from the cookie. It ain’t pretty, but it works dandy.

Now all of a sudden, a third value (img src) is introduced. I’ve therefore made a new function to create the cookie and to build the list. Life is still pretty great.

My problem arise, however, when I attempt to delete the item from the array.

JS

$('.deleteNewCookie').on('click', function () {
  var val = $(this).prev().prev().html(); // Search DOM for value

  var cookieStr = cookieData.split('|');
  createCookie('cokLocation', "", -1);
  var newCookie = '';
  $.each(cookieStr, function (index, value) {
     if (value != '') {
        var cookieAdd = value.split(',');
        if (cookieAdd[1] != val) {
           newCookie = newCookie + value + '|';
        }
     }
  });
  createCookie('cokLocation', newCookie, '300');
});

This is how one item in the cookie looks like:

ID,Name,/image.png|

Now, this works as intended when the markup was simpler and there was only the ID and Name, but when I click .deleteNewCookie now, the image sorce remains in the cookie. How would I go about deleting everything in that array (item)? Why does it apparently delete only the first two values?

Markup

<li>
  <div class="myLocImg">
    <img src="/image.png">
  </div>
  <div class="myLocInfo">
    <h3>NAME</h3>
    <span url="locationid=ID" class="btn">More details</span>
    <a class="deleteNewCookie">Remove</a>
  </div>
</li>

I’m somewhat reluctant to restructure my cookie (as it’s being used other places), but I may be persuaded as a last resort. I’m also not using any plugins, and I am not really interested in importing any. Plain JS or jQuery solutions only, please. 🙂

Answer 1

Fiddle trying to reproduce issue. Code works as expected. Other parts of code are causing issue.

Issue turned out to be relating to “createCookie() and how the values were stored in the HTML itself.”