javascript从数组中删除项目，拼接

Question

I'm making a small appwith localstaorage (not implemented yet): you type a note int the text area and it is display in a list

the note are stacked in an object called notes (for localstorage in the future);

But my problem is : I can add a note, but when I try to remove on of them, I have to remove my li and the related note object in the 'notes' array, so i decided to use splice method, but it works in a strange way...

when i click 'close', it works fine one or two times but at a moment the array stays with one or two object in it...

I tried different ways to solve the problem but without success...

Here is the fiddle : http://jsfiddle.net/h8hg6/1/

thanks for your help

Answer 1

I have made some modifications to your fiddle that I think solve the problem. Essentially you were using .splice incorrectly, and your Array was falling out of sync with your note elements. I've replaced your array with an numeric-based object because it is much easier to deal with. Here are some of the relevant changes:

http://jsfiddle.net/h8hg6/2/

var notes = {}; // notes is now an object instead of an array
// snip

var number = jQuery(this).parents('li').data('number');
delete notes[number]; // this is how you remove properties from an object

// snip
var note = {
    color: color,
    text: text
};

notes[i] = note; // add this object as a property of the notes object
i++;

Answer 2

The problem is that your call to splice uses the value of the queue variable to determine the index of the element that will be removed in the notes array. Right here:

notes.splice(queue, 1);

Since the queue value is always increasing (right here):

 function addNoteToPage(){
    i++;
    ...
    jQuery('ul#notes li:first').before('<li  data-queue="'+ i +'">'+ note.text +' <a href=""#>CLOSE</a>

You hit a moment where you call splice on an non-existing index of the notes array and nothing is removed as a result. Basically, you end up with an out-of-sync notes array.

You need to make sure that the value of the data-queue attribute coincides with the real index of the element in the notes array so that your call to splice(queue,1) always succeeds and removes the appropriate array element.

With that said, if above answer works for you, I'd go with that one. I just wanted to give you more insight on what was going on...