[JavaScript] splice en array index

[Hemmen]

Ik ben bezig om in Javascript/Jquery een script te maken waarmee ik in een formulier tags kan toevoegen en verwijderen.

Ik wil de tags bijhouden in een array. Het toevoegen van tags aan de array is geen probleem. Het verwijderen van de laatste tag gaat ook goed. Echter, als ik in het midden of aan het begin van de array een waarde verwijder door middel van array.splice ([index], [count]) gaat het fout en ik kan er maar niet achter komen hoe ik dit fatsoenlijk kan maken. Op een of andere manier raakt hij zijn index/teller kwijt als ik in het begin of in het midden een array entry verwijder.

Ik ben zelf vrij nieuw met Javascript en Jquery en ben nu inmiddels al een paar uur aan het uitproberen en zoeken op internet maar het is me nog steeds niet gelukt.

Ik heb al op diverse fora gekeken en diverse tutorials over array's doorgelezen maar krijg niet gevonden wat ik zoek.

Ik weet dat ik met het commando array.splice (index, count) een array entry kan verwijderen. Als ik echter vervolgens de array doorloop dan krijg ik maar de helft of is ineens alles weg.

Ik heb geprobeerd met:
for (var i=0; i<array.length; i++) {

en met

for (var x in tags) {

het lukt echter niet... Heeft iemand hier een oplossing voor?

formulier:

HTML:

<form method="post" action="" enctype="multipart/form-data">
Trefwoorden <input type="text" name="tag" value="" maxlength="16" class="input-tag" /><input type="button" value="toevoegen" class="button-tag-add" maxlength="128" />
<p class="tag-info"></p>

javascript/jquery code die hij uitvoert bij het toevoegen van een tag:

JavaScript:

    $('.button-tag-add').click(function () {
        var double = "";
        if ($('.input-tag').val() != "") {
            if (tags.length > 0) {
                for (var x in tags) {
                    if ($('.input-tag').val() == tags[x]) {
                        double = "yes";
                        $('#test').append('double!');
                    }
                }
                if (double != "yes") {
                    tags[counter] = $('.input-tag').val();
                    $('.tag-info').append('<span class="tag-item" id='+counter+'>'+counter+': '+$('.input-tag').val()+'<img src="images/remove.png" class="img-tag-remove" /><input type="hidden" name="tag-'+counter+'" value="'+$('.input-tag').val()+'" /></span>');
                    $('.input-tag').val('')
                    counter = counter+1;
                    $('#test').html('');
                    for (var x in tags) {
                        $('#test').append("id: "+x+" "+tags[x]+"<br />");
                    }
                }
            }
            else {
                tags[0] = $('.input-tag').val();
                $('.tag-info').append('<span class="tag-item" id='+counter+'>'+counter+': '+$('.input-tag').val()+'<img src="images/remove.png" class="img-tag-remove" /><input type="hidden" name="tag-'+counter+'" value="'+$('.input-tag').val()+'" /></span>');
                $('.input-tag').val('');
                counter = counter+1;
                $('#test').html('');
                for (var x in tags) {
                    $('#test').append("id: "+x+" "+tags[x]+"<br />");
                }
            }
        }
    })

javascript/jquery code hij hij uitvoert bij het verwijderen van een tag:

JavaScript:

        $('.tag-item').click(function () {
            var id = $(this).attr('id');
            tags.splice (id, 1);
            counter = counter-1;
            $(this).remove();
            $('#test').html('');
            
            var len=tags.length;
            for (var i=0; i<len; i++) {
                $('#test').append("id: "+i+" "+tags[i]+"<br />");
            }
        })

[ViNyL]

Je bedoelt eigenlijk iets in te trant van dynamisch invoer velden toevoegen? Hiervoor zou je dit kunnen gebruiken ipv het zelf uit te vinden:

http://code.google.com/p/jquery-dynamic-form/

[Hemmen]

ViNyL schreef op woensdag 21 maart 2012 @ 11:55:
Je bedoelt eigenlijk iets in te trant van dynamisch invoer velden toevoegen? Hiervoor zou je dit kunnen gebruiken ipv het zelf uit te vinden:

http://code.google.com/p/jquery-dynamic-form/

Eigenlijk precies hetzelfde als de tags die je op dit forum kunt koppelen aan een topic....

[Hemmen]

ViNyL schreef op woensdag 21 maart 2012 @ 11:55:
Je bedoelt eigenlijk iets in te trant van dynamisch invoer velden toevoegen? Hiervoor zou je dit kunnen gebruiken ipv het zelf uit te vinden:

http://code.google.com/p/jquery-dynamic-form/

Ik heb even gekeken naar deze plugin maar deze kan niet wat ik wil. Deze gaat enkel uit van het dupliceren van form elementen maar ik heb in 1e instantie geen enkel element.

[Struikrover]

Dan maak je toch 1 hidden element dat tevoorschijn komt onder een bepaalde conditie (klik op een knop o.i.d.), en indien hij zichtbaar is gedupliceerd kan worden?

[Hemmen]

Kan iemand aangeven waarom onderstaande code er voor zorgt dat na splice alle andere array elementen na ID ook verwijderd worden? Hij zou er maar 1 mogen verwijderen maar hij pakt alles vanaf ID en gooit die weg... Erg vreemd want als ik het 2e codeblok uitvoer dan gaat het wel goed.

JavaScript:

        $('.tag-item').click(function () {
            var id = $(this).attr('id');
            tags.splice (id, 1);
            $(this).remove();
            $('#test').html('');
            $('#test').append('id removed: '+id+'<br />');
            for (var x in tags) {
                $('#test').append("id: "+i+" "+tags[x]+"<br />");
            }
        })

JavaScript:

            var test = new Array ();
            test[0] = "aap";
            test[1] = "noot";
            test[2] = "mies";
            test.splice (1, 1);
            document.write (test.length);
            for (var x in test) {
                document.write(test[x]);
            }

[Hemmen]

Struikrover schreef op woensdag 21 maart 2012 @ 14:00:
Dan maak je toch 1 hidden element dat tevoorschijn komt onder een bepaalde conditie (klik op een knop o.i.d.), en indien hij zichtbaar is gedupliceerd kan worden?

Dat is een mogelijkheid, echter zou ik ook graag willen weten waarom bovenstaande code fout gaat. Dat helpt mij misschien ook beter inzicht te krijgen in wat er nou gebeurd. Het liefste gebruik ik mijn eigen code.

[RobIII]

Hemmen, gebruik a.u.b. de edit knop ( ) als je iets toe te voegen hebt; je topic herhaaldelijk omhoogschoppen is niet nodig en die melding staat er niet voor niets:

[C0rnelis]

Persoonlijk krijg ik sowieso geen overzicht in je code voornamelijk vanwege ontbrekende javascript/html voor een testcase... Probeer http://jsfiddle.net/ eens. Een tip: in plaats van document.write te gebruiken kijk eens naar

JavaScript:

console.log( var );

Werkt gegarandeerd met Firebug en Chrome's javascript console (var kan ook de gehele array zijn en accepteerd ook meerdere parameters, bijvoorbeeld:

JavaScript:

console.log( test.length, test );

Tips voor debuggen van je jQuery splice code-blok:
Log de arrays vóór splice en log ook de parameter id en log uiteraard de arrays weer na het aanroepen van splice. Houdt ook je console eens in de gaten of er zich tussendoor nog errors voordoen.

Edit:
http://jsfiddle.net/DvMt6/3/

De code lijkt me prima te werken... Het probleem ontstaat pas bij het verwijderen van een volgende tag.

JavaScript:

tags = ['aap', 'noot', 'mies'];

// 1e click op tag met id 1
tags.splice(1, 1)
// tags == ['aap', 'mies']

// volgende klik op tag met id 2
tags.splice(2, 1)

De laatste call naar splice zal een (silent) error geven: tags[2] bestaat immers niet meer want er bestaan nog maar twee elementen met index 0 (aap) en 1 (mies). Index 2 (mies) is opgeschoven naar 1 toen 1 (noot) is gespliced. Hopelijk heb ik je testcase goed begrepen

[ Voor 29% gewijzigd door C0rnelis op 26-03-2012 01:23 ]

[Hemmen]

C0rnelis schreef op maandag 26 maart 2012 @ 00:41:
Persoonlijk krijg ik sowieso geen overzicht in je code voornamelijk vanwege ontbrekende javascript/html voor een testcase... Probeer http://jsfiddle.net/ eens. Een tip: in plaats van document.write te gebruiken kijk eens naar

JavaScript:

console.log( var );

Werkt gegarandeerd met Firebug en Chrome's javascript console (var kan ook de gehele array zijn en accepteerd ook meerdere parameters, bijvoorbeeld:

JavaScript:

console.log( test.length, test );

Tips voor debuggen van je jQuery splice code-blok:
Log de arrays vóór splice en log ook de parameter id en log uiteraard de arrays weer na het aanroepen van splice. Houdt ook je console eens in de gaten of er zich tussendoor nog errors voordoen.

Edit:
http://jsfiddle.net/DvMt6/3/

De code lijkt me prima te werken... Het probleem ontstaat pas bij het verwijderen van een volgende tag.

JavaScript:

tags = ['aap', 'noot', 'mies'];

// 1e click op tag met id 1
tags.splice(1, 1)
// tags == ['aap', 'mies']

// volgende klik op tag met id 2
tags.splice(2, 1)

De laatste call naar splice zal een (silent) error geven: tags\[2] bestaat immers niet meer want er bestaan nog maar twee elementen met index 0 (aap) en 1 (mies). Index 2 (mies) is opgeschoven naar 1 toen 1 (noot) is gespliced. Hopelijk heb ik je testcase goed begrepen

Coowl! Ik dacht dat de index niet verschoof.... dom dom.... hardstikke bedankt, zo moet ik er wel uitkomen.