Menambah Dan Menghapus Class Dengan JQuery

Menambah Dan Menghapus Class Dengan JQuery

39

Dalam tutorial kali ini kita akan mempelajari cara untuk menambah dan menghapus class dengan JQuery.

Dengan Jquery kita juga bisa menambah, merubah, dan menghapus sebuah class yang telah kita definisikan sebelumnya pada CSS. Misal ada sebuah elemen yang sebelumnya tidak memiliki class CSS, lalu dengan mengklik tombol tertentu maka akan ada class baru yang ditambahkan pada elemen tersebut.

Misal, terdapat elemen awal seperti ini :

XHTML

<p>elemen</p>

Kemudian kita ingin menambahkan class baru, secara real time pada halaman web, maka kita dapat menambahkannya melalui sintaks Jquery, sehingga elemen tersebut nantinya akan menjadi seperti ini :

XHTML

<p class="red">elemen</p>

Dan agar dapat menambahkan class baru pada elemen HTML, method yang harus anda gunakan adalah method :

XHTML

addClass("namaClass");

Dalam method addClass() anda juga harus mendefinisikan sebuah parameter di dalamnya, yakni nama Class yang ingin anda tambahkan.

Berikut contoh source code nya :

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  .box{

    padding: 5%;

    width: 200px;

    border: 0px solid black;

    background-color: #3498db;

    color: white;

    font-size: 30px;

    text-align: center;

  }

</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <p>Hallo Dunia</p>



  <button class="klik">Klik</button>



  <script>

    $(function(){

      $(".klik").click(function(){

        $("p").addClass("box");

      });

    });

  </script>

</body>

</html>

Dan di bawah ini adalah outputnya :

menambahkan class baru dengan jquery


Menghapus class CSS menggunakan Jquery

Selain dapat menambah class baru ke dalam elemen HTML, kalian juga dapat menghapus class yang sudah ada pada elemen, caranya adalah dengan menggunakan method removeClass(), di dalam method ini juga terdapat parameter yang harus anda definisikan sebelumnya. Yakni nama class tersebut. removeClass(‘nama_class’).

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  .box{

    padding: 5%;

    width: 200px;

    border: 0px solid black;

    background-color: #3498db;

    color: white;

    font-size: 30px;

    text-align: center;

  }

</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <p class="box">Hallo Dunia</p>



  <button class="klik">Klik</button>



  <script>

    $(function(){

      $(".klik").click(function(){

        $("p").removeClass("box");

      });

    });

  </script>

</body>

</html>

Dan berikut outputnya, ketika tombol klik di klik :

menghapus class css dengan jquery


Merubah Class CSS menggunakan Jquery

Sedangkan jika kalian ingin merubah class css yang sudah ada sebelumnya dengan class yang baru, kita dapat mengkombinasikan penggunaan method removeClass() dengan method addClass(). Seperti ini :

XHTML

$("elemen").removeClass("namaClass").addClass("namaClass");

Jadi urutannya kita hapus lebih dulu class yang sudah ada, baru kita tambahkan class yang baru. Di bawah ini adalah contoh source code nya :

XHTML

<!DOCTYPE html>

<html>

<head>

  <style>

  #box{

    padding: 5%;

    width: 200px;

    border: 0px solid black;

    color: white;

    font-size: 30px;

    text-align: center;

  }

  .box-blue{

    background-color: #3498db;

  }

  .box-red{

    background-color: #e74c3c;

  }

</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

</head>

<body>

  <p id="box" class="box-red">Hallo Dunia</p>



  <button class="klik">Klik</button>



  <script>

    $(function(){

      $(".klik").click(function(){

        $("p").removeClass("box-red").addClass("box-blue");

      });

    });

  </script>

</body>

</html>

Dan gambar di bawah ini adalah hasilnya, ketika button belum di klik :

merubah class css dengan jquery

Sedangkan gambar di bawah ini adalah hasil ketika button sudah di klik, dimana warna background – nya berubah :

manipulasi class css dengan jquery


Demikian tutorial dari Menambah Dan Menghapus Class Dengan JQuery.

Dan jika ada pertanyaan lebih lanjut silakan kirim pada kolom di bawah.

Keywords: class jquery, tutorial jquery

Share: