Krijg in jquery niet een aangemaakt element verwijderd.

Door Jaco Grinwis op 22-04-2013 14:53 gewijzigd op 22-04-2013 17:27

1.691 views

Wanneer ik een element dynamisch aan maak en dan probeer te verwijderen dan lukt dit niet met jquery.
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>

Pieter R

22-04-2013 15:14 gewijzigd op 22-04-2013 15:20

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.

Jaco Grinwis

22-04-2013 17:37

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.

Ja super bedankt dat werkt dat ik daar heel de tijd over heen zag.

Pieter R

22-04-2013 18:41 gewijzigd op 22-04-2013 18:48

Jaco,
Was toch al met je script bezig en volgens mij kon die compacter.


$(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>

http://jsbin.com/usutaz/1/edit

Groet Pieter

Robert Wazzaa

22-04-2013 20:40

Hey Pieter,

Hij kan nog ietsjes compater haha:


$(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>

Pieter R op 22/04/2013 18:41:44

Jaco,
Was toch al met je script bezig en volgens mij kon die compacter.


$(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>

http://jsbin.com/usutaz/1/edit

Groet Pieter

Pieter R

22-04-2013 21:13

Hoi Robert,

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

Robert Wazzaa

22-04-2013 21:14

Jazeker:



$(document).ready (function () {

    $(".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.

Pieter R

22-04-2013 22:19

Daar moest ik even goed over nadenken...
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

Reageren

Inloggen om te reageren