JQuery HTML Elemanı Oluşturma ve Kaldırma

Bu örnekte, JQuery ile HTML nesnesi nasıl oluşturulur, CSS özelliği nasıl verilir, oluşturulan HTML elemanı nasıl olaya bağlanır ve nasıl silinebilir? sorusuna cevap bulacağız.

JQuery ile bir HTML elemanı oluşturmak için;


var kutu=$("<div>");

var liste=$("<li>");

var prgrf=$("<p>");

var kutu=$("<div>");

var liste=$("<li>");

var prgrf=$("<p>");

gibi bir kullanımda bulunabilirsiniz. Bu işlemden sonra HTML elemanı için özellikleri aşağıdaki gibi verebilirsiniz.

Örneğin bir div nesnesi oluşturup içine “Kutu” yazdıralım.


var kutu=$("<div>");
kutu.html("Kutu");

var kutu=$("<div>");

kutu.html("Kutu");

Şimdi de div nesnemize bir sınıf atayalım.


kutu.addClass("kutu");

kutu.addClass("kutu");

Birkaç CSS biçimlendirmesi ekleyelim.


kutu.css({backgroundColor:"#FF0000",width:"200px",height:"200px",textAlign:"center",
                      float:"left",margin:"10px",color:"#FFFFFF",lineHeight:"200px",fontSize:"30px"});

kutu.css({backgroundColor:"#FF0000",width:"200px",height:"200px",textAlign:"center",

float:"left",margin:"10px",color:"#FFFFFF",lineHeight:"200px",fontSize:"30px"});

Son olarak sayfamıza bu div öğesini ekleyelim.


$("body").append(kutu);

$("body").append(kutu);

JQuery’ de bir HTML elemanını silmek için ise remove() metodunu kullanabiliriz.

Şimdi örneğimiz geçelim. Örneğimizde bir button bulunmakta ve bu butona her basışta sayfada bulunan bir div içine genişliği ve yüksekliği 200px olan divler eklenmektedir. Eklenen bu divlerin üstüne tıklandığında div öğelerinin kaldırılması sağlanmaktadır.

HTML sayfamıza ait kodların tamamı:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>yazilimkodlama.com</title>
</head>

<body>
    <button id="btn">OLUŞTUR</button>
    <div id="container"></div>
    
    <script>
        var sayac=1;
        $("#btn").click(function(){
            var kutu=$("<div>");
            kutu.addClass("kutu");
            kutu.html("Kutu "+sayac);
            sayac++;
            kutu.css({backgroundColor:"#FF0000",width:"200px",height:"200px",textAlign:"center",
                      float:"left",margin:"10px",color:"#FFFFFF",lineHeight:"200px",fontSize:"30px"});
            $("#container").append(kutu);
            kutu.on("click",function(){
                $(this).remove();
            })
        })
        
    </script>
</body>
</html>