[jQuery] .remove werkt niet
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 :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* 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;
});
};
* 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 ?
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.
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 ?
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:
Code (php)
1
2
3
2
3
...
$html.append('<div class="whatever" onclick="doeIets()" />');
...
$html.append('<div class="whatever" onclick="doeIets()" />');
...
Doe je zoiets
Code (php)
1
2
3
2
3
...
$html.append($('<div class="whatever" \/>').click(this.doeIets));
....
$html.append($('<div class="whatever" \/>').click(this.doeIets));
....
En op een andere plek:
Code (php)
1
2
3
2
3
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:
Code (php)
1
2
3
2
3
html = '<div>\
<p>Hello world.<\/p>\
<\/div>';
<p>Hello world.<\/p>\
<\/div>';
Gewijzigd op 07/03/2015 14:39:51 door Thomas van den Heuvel
Heb het nu zo staan :
Code (php)
1
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.
Gewijzigd op 07/03/2015 14:42:51 door Wouter Van Marrum
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()
...
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.
Code (php)
1
delItem.closest("#deleteID").remove();
Toch bedankt voor de uitleg, gr Wouter.
EDIT: er zit trouwens (nog) een fout in je oorspronkelijke code-fragment. Regel 14 heeft geen afsluitende dubbele quote voor het rel-attribuut.
Gewijzigd op 07/03/2015 16:24:10 door Thomas van den Heuvel