Tambah dan Hapus Class Function di JQuery

Bismillah..
Teman-teman berjumpa lagi nih di www.masfendi.me, situs asik tempat belajar koding, share ilmu dan pengetahuan.

Yap kali ini saya akan share bagaimana cara menambah dan menghapus CLASS Function di JQuery.
mungkin sudah tidak asing lagi di telinga kita apalagi bagi seorang UI/UX yang notabenya desain diharuskan faham dalam salahsatu bahasa pemrograman ini.

#Pengertian JQuery
Jquery itu sendiri adalah sebuah kumpulan dari berbagai fungsi - fungsi (siap digunakan) untuk mempermudah dalam pembuatan sebuah aplikasi.

Pada tahun 2006 Jhon Resign berhasil memberikan trobosan untuk para developer dalam mengembangkan sebuah aplikasi (Web) yaitu menggunakan Jquery. Sejak saat itu Jquery dikembangkan menjadi Opensource dan menjadi library JavaScrip yang sangat populer di dunia. untuk situs resminya beralamat di jquery.com.

Untuk membuat Tambah dan Hapus Class Function di JQuery itu sebenarnya sangat mudah mari ikuti langkah - langkah berikut yang akan membawa anda ke zona nyaman dalam belajar tutorial. All right :)

Lalu bagaimana cara kerja Tambah dan Hapus Class Function di JQuery yang akan kita buat?
Mungkin gambar dibawah ini dapat menjelaskan lebis spesifik.

IlustrasiTambah dan Hapus Class Function di JQuery

1. Butlah sebuah file bernama index.html dan ketikanlah struktur kerangka koding html biasa dari <html> hingga </html> anda bisa men copy contoh berikut.

<!DOCTYPE html>
<html>
<head>
    <title>Tambah dan Hapus Class Function di JQUERY | masfendi.me </title>
</head>
<body>
</body>
</html>

kode diatas adalah struktur kode dari HTML yang akan kita olah pada artikel ini. Saya harap anda sudah membuat atau meng copy kode tersebut diatas.

2. Massukan kode berikut dibawah <head> dan diatas </head> lihatlah contoh berikut.

 <head>
   <script src="jquery.js" type="text/javascript"></script>
   <link href="style.css" rel="stylesheet" type="text/css"></link>
</head>

Jika kita lihat dari kode diatas (<script src="jquery.js" type="text/javascript"></script>) secrip tersebut digunakan untuk memanggil sebuah file Jquery.js dengan bertipe rext/javascript. anda bisa mendownload file tersebut di | Jquery.com atau Github.com.

Untuk kode (<link href="style.css" rel="stylesheet" type="text/css"></link>) scrip tersebut merupakan scrip untuk memanggil CSS atau file yang ber extensi .css. File tersebut anda bisa mendownload di | Github.com.

sehingga keseluruhan kode tersebut akan menjadi seperti ini


<!DOCTYPE html>
<html>
<head>
<title>Tambah dan Hapus Class Function di JQUERY | masfendi.me </title>
   <script src="jquery.js" type="text/javascript"></script>
   <link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
</body>
</html>

Dari langkah yang sudah kita kerjakan kita sudah memiliki beberapa file dan file tersebit dimasukkan dalam satu folder yang sama. file tersebut adalah :

index.html
jquery.js
style.css

3. Buka dan edit file index.html lalu masukkan kode berikut.


<body>

<h1>add and remove class Function JQuery | masfendi.me</h1> 

<button class="tombol1" id="tambah">Tambahkan</button> 

<div class="kotak_dasar"></div>

</body>

<script type="text/javascript">

 $(document).ready(function(){ 

  //untuk menambah class css

  $('#tambah').click(function(){

   $('.kotak_dasar').append('<div class="kotak"> <button class="tombol" id="hapus">Hapus</button> </div>')

  }); 

  //untuk menghapus class css

  $('.kotak_dasar').on("click", ".tombol", function() {

   $(this).parent('.kotak').remove();

  }); 

 });

</script>

alhamdulilah artikel kali ini sampai disini dulu, untuk Melihat hasil/contohnya silahkan lihat dibawah.
terimakasih sudah membaca semoga bermanfaat bagi kita semua.