[jQuery] .remove werkt niet

Door Wouter Van Marrum op 07-03-2015 12:15

2.000 views

Hallo iedereen,

Mijn remove functie werkt niet.
( zon korte omschrijving haha )

IK maak gebruik van een button die onclick javascript moet gebruiken.
Nu werkt deze alleen als ik 2 keer click lijkt wel.

En hij verwijderd de li tag niet na verwijdering.

Hier is de code :




/**
 * Get all tasks from the database.
 * @return {json string} Get all the tasks from the database.
 */
TASK.getAll = function(ol, c) {

    $.get("/dashboard/tasks/get_tasks/", function(data) {

    	$(c).append(data.length);

        for (var i = 0; i < data.length; i++) {

            $(ol).append(
            	'<li rel="'+ data[i].id +'> ' +
                    '<label><span class="task-description">' + data[i].taskTitle + '</span> <span class="label label-' + data[i].taskColor + '">' + data[i].taskLabel + '</span></label>' +
                    '<div class="options todooptions ng-scope">' +
                        '<div class="btn-group">' +
                            '<button class="btn btn-default btn-xs" onclick="complete(this, item)" rel="'+ data[i].id +'"><i class="fa fa-fw fa-check"></i></button>' +
                            '<button class="btn btn-default btn-xs" onclick="edit(item)" rel="'+ data[i].id +'"><i class="fa fa-fw fa-pencil"></i></button>' +
                            '<button id="delete" class="btn btn-default btn-xs" onclick="TASK.deleteTask(\'#delete\')" rel="'+ data[i].id +'"><i class="fa fa-fw fa-trash-o"></i></button>' +
                        '</div>' +
                    '</div>' +
                '</li>');
		}

    }, 'json');

};

TASK.deleteTask = function(btn) {
    $(btn).on('click', function() {
        delItem = $(this);
        var id = $(this).attr('rel');

        $.post('/dashboard/tasks/delete_task/', {'id': id}, function(o) {

            delItem.parent(".btn-group").parent(".options").parent("label").parent("li").remove();
        }, 'json');
        
        return false;
    });
};

Hoe kan ik dit oplossen ?

Thomas van den Heuvel

07-03-2015 14:11

label is geen parent van div.options maar een sibling :). (en kan dus worden weggelaten)

De parents zijn ook eenduidig, dus waarom zou je al die klasses toevoegen? Je hoeft toch enkel X niveaus omhoog?

Bonus: in de HTML die je in bovenstaande code genereert staan onclick-events, maar dat zijn toch events die je kunt "registreren" bij de opbouw van deze HTML? Deze kun je onderdeel maken van het "gedrag" wat je implementeert in je TASK-functionaliteit.

Wouter Van Marrum

07-03-2015 14:22

Hallo thomas,

Wist niet helemaal hoe parent werkt ( gebruik niet vaak eigen jquery codes ).
Maar ik begrijp niet helemaal wat je bedoelt met wat je bedoelt met de events registreren.

Als ik op de knop gebeurt er niks ( best logisch ) maar de taak wordt wel verwijderd wat een beetje wazig is.
Ik probeer via jquery de code dusdanig te maken dat als ik klik hij wordt verwijderd en verdwijnt uit de lijst.

Nu zul jij misschien denken makkie, Maar ik zit hier een beetje sjaggie te worden haha.
zoals ik al zij ik gebruik zelden eigen jquery code ( omdat ik nooit wat speciaals nodig had ) dus mijn javascript/jquery kennis is best laag.

Maar als ik dus siblings gebruik zou het moeten lukken ?

Thomas van den Heuvel

07-03-2015 14:27 gewijzigd op 07-03-2015 14:39

parent = bovengelegen element
sibling = naastgelegen element

Je doet net of het label een parent is van div.options, maar dit is een naastgelegen element, wat je kunt zien door het nette inspringen wat je al doet.

Het pad naar de div die je wilt verwijderen klopt dus niet en daarom mislukt die selectie.

Maar daarvoor heb je de desbetreffende task al weggekieperd via een $.post, dus dat dat wel gebeurt is niet zo verwonderlijk.

EDIT: met events registeren bedoel ik zoiets:

In plaats van:

...
$html.append('<div class="whatever" onclick="doeIets()" />');
...

Doe je zoiets

...
$html.append($('<div class="whatever" \/>').click(this.doeIets));
....

En op een andere plek:

this.doeIets = function() {
    ...
}

Bonus: Als je een HTML snippet hebt die je uitschrijft in JavaScript kun je de string over meerdere regels laten lopen met backslashes aan het einde van een regel:

html  = '<div>\
            <p>Hello world.<\/p>\
        <\/div>';

Wouter Van Marrum

07-03-2015 14:40 gewijzigd op 07-03-2015 14:42

Oke maar dan zou ik dus een parent, 2 siblings en nog 1 parent moeten hebben om het pad goed te hebben ?

Heb het nu zo staan :


            delItem.parent(".btn-group").siblings(".options").siblings("label").parent("#deleteID").remove();

Schijnt nog niet te werken dus zal even verder kijken.

Edit :
Nadeel van het "registreren" is dat ik meerdere functie's wil gebruiken.
Dus dan zou ik meerdere click events moeten gebruiken.

Thomas van den Heuvel

07-03-2015 15:30

Neeee....

Je wilt uitgaande van een element X op niveau A een aantal niveau's omhoog in je HTML-structuur.

Met PARENT spreek je een BOVENGELEGEN (omvattend) element aan.

Maar het LABEL zit OP DEZELFDE DIEPTE als DIV.OPTIONS terwijl jij doet alsof dat EEN BOVENGELEGEN ELEMENT is.

Je selectie van bovengelegen elementen is dus fout.

Zucht.

Als je vanuit je delete button naar de te verwijderen div wilt is het af te leggen pad:
div.btngroup > div.options > li
EN DUS NIET
div.btngroup > div.options > label > li

de label omvat div.options niet en is dus GEEN PARENT VAN div.options.

Ik weet niet hoe ik dit duidelijker kan uitleggen...

Okee: doe gewoon:
parent().parent().parent().remove()
in plaats van
parent().parent().parent().parent().remove()

...

Wouter Van Marrum

07-03-2015 15:52

Hallo Thomas,

Dankjewel voor je uitleg.
Snap het nu een stuk beter, maar had in de tussentijd ook al even op google gekeken en daar kwam een ander antwoord uit wat precies zo werkt.


delItem.closest("#deleteID").remove();

Toch bedankt voor de uitleg, gr Wouter.

Thomas van den Heuvel

07-03-2015 16:15 gewijzigd op 07-03-2015 16:24

Dan hoop ik voor jou dat je niet meerdere keren #deleteID gebruikt (wat dit ook moge zijn) en dat altijd de juiste selectie wordt gemaakt, anders kieper je de verkeerde taak weg.

EDIT: er zit trouwens (nog) een fout in je oorspronkelijke code-fragment. Regel 14 heeft geen afsluitende dubbele quote voor het rel-attribuut.

Reageren

Inloggen om te reageren