1

In the javascript, there are two arrays:tags[] and tags_java[]. I use .splice to delete certain items, which of the same index in the two arrays. The tags[] works fine, but tags_java doesn't, it seems always delete the last item.
Here is the code and the jsfiddle link.

var tag = $(this).text();
var index = $.inArray(tag, tags);
    tags.splice(index,1);
    tags_java.splice(index,1);
user123444555621
  • 148,182
  • 27
  • 114
  • 126
Shan Luo
  • 63
  • 2
  • 12
  • Can you provide/check the value of index, tags array and tags_java array just before u perform slice on either of them..? – abipc Aug 18 '13 at 20:36
  • Your tag is never in the array - that appended `×` is showing up as part of the span's text, so `$.inArray()` always returns -1. – Paul Roub Aug 18 '13 at 20:37

2 Answers2

1

If the tag is not in the tags array, $.inArray will return -1, which would then cause the last item to be deleted.

You have to make sure that the item is actually in the array.

Community
  • 1
  • 1
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
1

Nah, both don't work, because you're not actually finding the correct index of your tag.

Why not? Because $(this).text() includes the delete mark you added, × - e.g. "Morning×". Since that's not in your tags array, index will be -1. tags.splice(-1, 1); will remove 1 item from the end of the array.

In general, it's never a good idea to use presentation text (i.e. the text of your tag element) as data (e.g. using that text as a lookup value in an array). It's very likely that it'll be broken when something changes in the presentation - like here. So a suggestion would be to store the data (what you need to look up the tags) as data - e.g. using the jQuery-provided data() API - even if it seems redundant.

Here's a quick example - just adding/replacing two lines, which I've marked with comments starting with "JT": JSFiddle

Now, instead of looking up by $(this).text(), we're looking up by the data value "tagValue" stored with $(this).data() - that way, the lookup value is still bound to the element, but we're not relying on presentation text.

JimmiTh
  • 7,389
  • 3
  • 34
  • 50
  • Thanks @JimmiTh. But how can I fix it? How can I trim the "&times" from the text? – Shan Luo Aug 18 '13 at 21:03
  • You could use `var tag = $(this).text(); tag = tag.substr(0, tag.length - 1);` to remove the `×`, but as mentioned in the second paragraph, that's very error prone. Adding an example to the answer of what I mean by storing the data *as* data. – JimmiTh Aug 18 '13 at 21:09
  • But for now the lookup value is stored with the content "'Afternoon','Morning' because if I store them as numbers like'1,2..', I don't know how to retrieve the information in another page. Any suggestions? Thanks. – Shan Luo Aug 18 '13 at 21:18
  • Not quite sure what you mean - the code in the JSFiddle (updated) works *exactly* like your original code - except it uses `data()` on the tag element, rather than `text()`. – JimmiTh Aug 18 '13 at 21:28
  • Thanks @JimmiTh, that works great. I will have a good look on the .data. It's a great idea. I meant after you store these data values, like '300,301,302' in this case, how can I display them in another page with specific content and colors. Is this clearer? – Shan Luo Aug 18 '13 at 21:59
  • That's really a rather big question - which also depends on your server-side code etc. I'd suggest creating a new question for it. :-) – JimmiTh Aug 19 '13 at 07:48