Bu örnekte JQuery ile HTML Liste oluşturarak, Text kontrolüne girilen List elemanlarının Buttona basıldığında liste elemanı olarak eklenmesini sağlayacağız.
Daha sonraki adımda üstüne tıklanan <li> öğesinin listeden çıkarılmasını sağlayacağız.
Bu işlemi liste elemanı olarak eklediğimiz Buttonlar ile gerçekleştireceğiz.
Kodlar:
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text" id="txtUrun"> <button id="btnEkle">EKLE</button> <ul id="liste"> </ul> <script> $("#btnEkle").click(function(){ var eleman=$("<li>"); var but=$("<button>",{class:"b"}); but.css({background:"red",textAlign:"center",color:"white"}); eleman.append($("#txtUrun").val()); but.text("X"); eleman.append(but); $("#liste").append(eleman); eleman.on("click",".b",function(){ //$(eleman).remove(); $(this).parent().remove(); }) }) </script> </body> </html> |
Yorum Yap