Krijg in jquery niet een aangemaakt element verwijderd.
In eerder versies kon ik dit wel doen met .live() maar die functie is vervangen voor .on() en die is werkt anders.
Mijn script is nu:
<!DOCTYPE HTML>
<html lang="nl-NL">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#test").on("click",".add",function(){
$(this).parent().find("ul").append("<li>Tekst<button>Remove</button></li>");
});
$("#container").on("click",".remove",function(){
$(this).parent().remove();
});
});
</script>
</head>
<body>
<div id="test">
<button class="add">Add</button>
<ul id="container">
<li>Tekst<button class="remove">Remove</button></li>
</ul>
</div>
</body>
</html>
Gewijzigd op 22/04/2013 17:27:05 door Jaco Grinwis
In het script heb ik echter enkele quotes gebruikt.
-> class='remove'
Ben niet zeker of dat helemaal correct is, maar het werkt wel.
Gewijzigd op 22/04/2013 15:20:14 door Pieter R
Pieter R op 22/04/2013 15:14:11:
http://jsbin.com/irenef/3/edit
In het script heb ik echter enkele quotes gebruikt.
-> class='remove'
Ben niet zeker of dat helemaal correct is, maar het werkt wel.
In het script heb ik echter enkele quotes gebruikt.
-> class='remove'
Ben niet zeker of dat helemaal correct is, maar het werkt wel.
Ja super bedankt dat werkt dat ik daar heel de tijd over heen zag.
Was toch al met je script bezig en volgens mij kon die compacter.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
$(".add").on("click", function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
});
$("#container").on("click", ".remove", function () {
$(this).parent().remove();
});
});
<div>
<button class="add">Add</button>
<ul id="container"></ul>
</div>
$(".add").on("click", function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
});
$("#container").on("click", ".remove", function () {
$(this).parent().remove();
});
});
<div>
<button class="add">Add</button>
<ul id="container"></ul>
</div>
http://jsbin.com/usutaz/1/edit
Groet Pieter
Gewijzigd op 22/04/2013 18:48:04 door Pieter R
Hij kan nog ietsjes compater haha:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function () {
$(".add").on("click", function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
});
$(".remove").click(function () {
$(this).parent().remove();
});
});
<div>
<button class="add">Add</button>
<ul id="container"></ul>
</div>
$(".add").on("click", function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
});
$(".remove").click(function () {
$(this).parent().remove();
});
});
<div>
<button class="add">Add</button>
<ul id="container"></ul>
</div>
Pieter R op 22/04/2013 18:41:44:
Jaco,
Was toch al met je script bezig en volgens mij kon die compacter.
http://jsbin.com/usutaz/1/edit
Groet Pieter
Was toch al met je script bezig en volgens mij kon die compacter.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
$(".add").on("click", function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
});
$("#container").on("click", ".remove", function () {
$(this).parent().remove();
});
});
<div>
<button class="add">Add</button>
<ul id="container"></ul>
</div>
$(".add").on("click", function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
});
$("#container").on("click", ".remove", function () {
$(this).parent().remove();
});
});
<div>
<button class="add">Add</button>
<ul id="container"></ul>
</div>
http://jsbin.com/usutaz/1/edit
Groet Pieter
Had dit wel geprobeert.
Het vreemde is dat dat niet werkt.
http://jsbin.com/uxedog/2/edit
Jouw aanpassing gedaan op regel 3 en dat gaat weer wel goed.
Enig idee?
Groet Pieter
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$(document).ready (function () {
$(".add").click (function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
$(".remove").click (function () {
$(this).parent().remove();
});
});
});
$(".add").click (function () {
$("ul").append("<li> Tekst <button class='remove'> Remove </button> </li>");
$(".remove").click (function () {
$(this).parent().remove();
});
});
});
Je moet de click functie van .remove pas initializeren als de .remove er is.
Had dit even over het hoofd gezien.
Ben nog niet zo lang bezig met jQuery.
http://jsbin.com/asuqir/2/edit
Hiermee werd het wel duidelijk.
De eerst drie wel geinitaliseerd. De toegevoegde niet.
In iedergeval dank.
Groet Pieter