CODEWITHSUNDEEP
javascriptjqueryunbind
Claudio
Claudio

Reputation: 3824

jquery- empty working only once

I have two simple lists where items go from one to the other when you click on an item. To accomplish that I use empty and append to clear from one list and add it to the other. But unfortunately it only works the first time. The second time it doesn't remove the item while it appends more of the same items in the opposite list. Here is the short version of the code:

<script>
  function item_set(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_unset#" + it_id).empty();
    $(".item_already_set").append('<div class="equipment_item_set" id="' + it_id + '" onclick="item_unset(' + it_id + ')"><span id="item_info_' + it_id + '">' + it_info + '</span><br>');

  }

  function item_unset(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_set#" + it_id).empty();
    $(".item_unset").append('<div class="equipment_item_unset" id="' + it_id + '" onclick="item_set(' + it_id + ')"><span id="item_info_' + it_id + '">' + it_info + '</span><br>');
  }

</script>
UNSET
<div class="item_unset"></div>
<div class="equipment_item_unset" id="1063" onclick="item_set(1063)">
  <span id="item_info_1063">3 - Pans</span>
  <br>
</div>
<div class="equipment_item_unset" id="1040" onclick="item_set(1040)">
  <span id="item_info_1040">2 - Pots</span>
  <br>
</div>

<br>
<br>SET
<div class="item_already_set"></div>
<div class="equipment_item_set" id="1045" onclick="item_unset(1045)">
  <span id="item_info_1045">4 - Glasses</span>
  <br>
</div>

And here the code in JSFiddle: https://jsfiddle.net/qmekr48m/3/

I remember it happened something similar to me in the past (sorry, not much into JQuery), and I believe that time was an issue with binding/unbinding handlers, but sincerely it's been a while since that occurred.

Upvotes: 0

Views: 286

Answers (2)

nitishk72
nitishk72

Reputation: 1746

https://jsfiddle.net/nitishk72/uowu0mu4/

You just have to remove instead of empty. 

  function item_set(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_unset#" + it_id).remove();
    $(".item_already_set").append('<div class="equipment_item_set" id="' + it_id + '" onclick="item_unset(' + it_id + ')"><span id="item_info_' + it_id + '">' + it_info + '</span><br>');
  }

  function item_unset(item_id) {
    var it_id = item_id;
    var it_info = $("#item_info_" + it_id).html();
    $(".equipment_item_set#" + it_id).empty();
    $(".item_unset").append('<div class="equipment_item_unset" id="' + it_id + '" onclick="item_set(' + it_id + ')"><span id="item_info_' + it_id + '">' + it_info + '</span><br>');
  }
UNSET
<div class="item_unset"></div>
<div class="equipment_item_unset" id="1063" onclick="item_set(1063)">
  <span id="item_info_1063">3 - Pans</span>
  <br>
</div>
<div class="equipment_item_unset" id="1040" onclick="item_set(1040)">
  <span id="item_info_1040">2 - Pots</span>
  <br>
</div>

<br>
<br>SET
<div class="item_already_set"></div>
<div class="equipment_item_set" id="1045" onclick="item_unset(1045)">
  <span id="item_info_1045">4 - Glasses</span>
  <br>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Upvotes: 1

alecschrader
alecschrader

Reputation: 371

The function you are looking for is remove. Empty removes the contents inside of the element, but leaves the element, so you when you set an item you end up with two elements with the same id. Then when you unset the item jquery is getting the first element it finds with that id.

$(".equipment_item_unset#" + it_id).remove();

updated fiddle

Upvotes: 2

Related Questions