How to remove cookie use js.cookie & jquery in toggles?

Here is my html code:

<div class="accordion_container">
    <div class="accordion_head" node-tag="#1">First Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>First Accordian Body, it will have description</p>
    </div>
    <div class="accordion_head" node-tag="#2">Second Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>Second Accordian Body, it will have description</p>
    </div>
    <div class="accordion_head" node-tag="#3">Third Accordian Head<span class="plusminus">+</span>
    </div>
    <div class="accordion_body">
        <p>Third Accordian Body, it will have description</p>
    </div>
</div>

and this is my js script

$(document).ready(function () {
    //toggle the component with class accordion_body
    $(".accordion_head").click(function () {
        var tag = $(this).attr("node-tag");
        if ($(this).next(".accordion_body").is(':visible')) {
            $(this).next(".accordion_body").slideUp(300);
            $(this).next(".accordion_body").addClass("collapsed");
            Cookies.set('collapsed_Nodes', (Cookies.get('collapsed_Nodes') || '')+tag, { expires: 7, path: '' });
            $(this).children(".plusminus").text('+');
        } else {
            $(this).next(".accordion_body").slideDown(300);
            $(this).next(".accordion_body").addClass("expadned");
            Cookies.remove('collapsed_Nodes', (Cookies.remove('collapsed_Nodes') || '')+tag, { expires: 7, path: '' });
            $(this).children(".plusminus").text('-');
        }
    });
});

My question is, if I click collapse, it work, but when I click extend, it can't remove the value from cookie, it will just add the value to the cookie...

Can someone help me to find this problem?

Here is the js fiddle link

Solution

Instead of removing the tag, you can simply rebuild it from all the values that should still be there. That way it follows the same logic each time.

$(document).ready(function() {
  var $accordionHead = $(".accordion_head");

  //toggle the component with class accordion_body
  $accordionHead.on("click", function() {
    var $head = $(this);

    $head.toggleClass("collapsed");

    if ($head.is(".collapsed")) {
      $head.next(".accordion_body").slideUp(300);
    } else {
      $head.next(".accordion_body").slideDown(300);
    }

    var $collapsedHeads = $accordionHead.filter(".collapsed");
    
    Cookies.set(
      "collapsed_Nodes",
      $collapsedHeads.map(function(){ return this.getAttribute("node-tag"); }).get().join(''),
      {
        expires: 7,
        path: ''
      }
    );
  });
});

.accordion_container {
  width: 500px;
}

.accordion_head {
  background-color: skyblue;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 18px 5px;
  margin: 0px;
}

.plus,
.minus {
  float: right;
}

.collapsed .minus,
.plus {
  display: none;
}

.collapsed .plus {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>

<div class="accordion_container">
  <div class="accordion_head" node-tag="#1">First Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>First Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" node-tag="#2">Second Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>Second Accordian Body, it will have description</p>
  </div>
  <div class="accordion_head" node-tag="#3">Third Accordian Head<span class="plus">+</span><span class="minus">-</span>
  </div>
  <div class="accordion_body">
    <p>Third Accordian Body, it will have description</p>
  </div>
</div>