Header Ads

Belajar jQuery Part 8 : Menghapus Element Dengan jQuery

Menghapus Element Dengan JQuery
 
Untuk menghapus element HTML dengan JQuery, JQuery telah menyediakan sebuah fungsi yang berguna untuk menghapus element HTML yaitu dengan menggunakan fungsi remove().

PENGERTIAN REMOVE() 
Fungsi remove() pada JQuery adalah fungsi yang disediakan oleh JQuery untuk menghapus element HTML untuk keperluan sesuatu. Untuk lebih jelasnya dan menambah pemahaman dari fungsi remove untuk mengapus element HTML dengan JQuery.

perhatikan contoh cara menggunakan fungsi remove() pada JQuery berikut

<!DOCTYPE html>
<html>
<head>
    <title>Belajar JQuery Part 6 : Menambahkan CSS Di JQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        body{
            font-family: raleway;
        }
        a {
            color: green;
        }
        a:hover{
            color: blue;
        }
        h1{
            text-align: center;
        }
        .kotak{
            width: 300px;
            height: auto;
            background: green;
            padding: 30px;
            color: #fff;
            margin-bottom: 15px;
        }
        button{
            color: black;
            background: lime;
            border: 1px solid green;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        button:hover{
            color: white;
            background: green;
            border: 1px solid lime;
        }
        .lingkaran{
            border-radius: 4%;
            width: 200px;
            height: 200px;
            background: lime;
            padding: 30px;
            color: #fff;
            margin-top: 20px;
        }
        .biru{
            border-radius: 20%;
            background: lightblue;
        }`
    </style>
</head>
<body>
    <h1>Belajar menambahkan Css di jQuery<br>
    <a href="http://www.bimablctelkom.com">Bima Blc Telkom</a></h1>
<center>
<button>Klik Disini</button>

    <div class="kotak">
        <span>Menghapus Kotak</span>
        </div>
</center>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('.kotak').remove();
        });
    });
</script>
</html>




KESIMPULAN
Pada contoh di atas bisa diperhatikan bahwa fungsi remove() digunakan untuk menghapus element HTML


    $('.tombol').click(function(){
        $('.kotak').remove();
    });

Pada saat tombol diklik maka fungsi remove dijalankan pada element HTML yang memilki class kotak untuk menghapus element kotak. Sekian tutorial Menghapus Element Dengan JQuery , Sekian Terima Kasih 

No comments

Powered by Blogger.