Cannot remove an item by programming

[tdhung80]

hi,

When item is an object, i cannot remove it from the tagsinput. I have checked the source code, it is trying to find item by "$(this).data("item) === item", but it failed if item is an object.

I suggest you should look for value to remove associated item.

My Best,
Hung Tran

[timschlechter]

I'm guessing you're trying to remove the item by passing the item's value at the 'remove' call. Now the remove tries to find the item by reference, but i think you're right. Might be a good thing to try to find by both reference and value.

[tdhung80]

Hi Tim,

I does not work both reference and value also. Normally, we don't have same object to post it into remove method.

Problem #1: Cannot remove an object from the control

[Setup code]
var $tags = $('.tags');
$tags.tagsinput({ itemValue: 'value', itemText: 'text' });

    var item = { "value": 1 , "text": "Amsterdam", "type" : "1" };
   $tags.tagsinput('add', $item);

   $('.btn-remove').click(function() { 
          $tags.tagsinput('remove',  { "value": 1 , "text": "Amsterdam", "type" : "1" }); // does not work
          $tags.tagsinput('remove',  { "value": 1 }); // does not work
          $tags.tagsinput('remove',  1 ); // does not work
          $tags.tagsinput('remove', item); // seems to work, but it requires me to create variable to keep the same object reference, not much useful.
   });

As checking the code, i think the remove function should remove item with the same value instead of checking objects equally by === operator.

Problem #2: I could add duplicated item (object mode) into the control. IMHO, the control should ignore this if it's not in multiple mode.

My Best,
Hung Tran

[timschlechter]

I fixed these issues in latest release (0.3.0). You should now be able to pass the following as argument to remove a tag:

• exact same object instance as was added, or
• other object instance, but wih the same value, or
• just a value

All 3 scenario's should work.

I also made sure you can just set 1 tag when using a <select /> without multiple. When trying to add a new tag, it removes the one allready set.

Take a look at commit a319af5 for more details. Let me know if you run into any problems.

[tdhung80]

hi Tim,

I have tested all the cases, they are worked perfectly. However, it would be more flexible if i can receive my item which i put into remove method (like i can get the same item when i put it into add method).

var myItem1 = { value: 1, text: 'text 1' };
$tagsInput.add(myItem1);
At itemAdded event, i can get the same reference as what i put into add method (myItem1).

var myItem2 = { value: 1, context: 'gridAction' };
$tagsInput.remove(myItem2);
At itemRemoved event, it returns myItem1 (the object added). It's more flexible if i can get myItem2 instead.

My Best,
Hung Tran

[timschlechter]

Seems a good idea, perhaps providing both is even bettter:

self.$element.trigger($.Event('itemRemoved', { item: item, originalItem: originalItem }));

In which 'item' is the item you passed as an argument, and 'originalItem' is the instance acutally removed from the input.

[michaelDotco2]

I had a similar problem, the item variable was a number but wasn't removing the item.
However i found it worked with JSON.stringify(item);