jQuery - Uklanjanje elemenata i atributa

jQuery uklanjanje elemenata ili sadržaja

jQuery nudi pregršt metoda, kao što su: empty(), remove(), wrapper() itd. za uklanjanje postojećih HTML elemenata ili sadržaja iz dokumenta.


jQuery empty() Metoda

jQuery metoda empty() uklanja sve podređene elemente kao i ostale potomke i tekstualni sadržaj unutar odabranih elemenata iz DOM-a. Sljedeći primjer će ukloniti sav sadržaj unutar elemenata s klasom .container klikom na dugme. 

<script>
$(document).ready(function(){
    // Isprazni container elementa
    $("button").click(function(){
       $(".container").empty();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje sadržaja elemenata u jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Ispraznite div container na klik
    $("button").click(function(){
       $(".container").empty();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI!</h1>
        <p class="hint"><strong>Napomena:</strong> Ako kliknete na
        dugme, ukloniće se sav sadržaj elementa div container, uključujući 
        dugme.</p>
        <button type="button">Isprazni container</button>
    </div>
</body>
</html>

jQuery remove() metoda

jQuery metoda remove() uklanja odabrane elemente iz DOM-a kao i sve unutar njega. Uz same elemente uklanjaju se svi vezani događaji i podaci jQuery-a koji su povezani s elementima. Sljedeći primjer će ukloniti sve elemente <p> s klasom .hint iz DOM-a nakon klika na dugme. Uklonjeni elementi unutar ovih pasusa takođe će se ukloniti. 

<script>
$(document).ready(function(){
    // Ukoloni paragrafe s klasom "hint" iz DOM-a
    $("button").click(function(){
       $("p.hint").remove();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje elemenata iz DOM-a u jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Ukoloni paragrafe s klasom "hint" iz DOM-a klikom na dugme
    $("button").click(function(){
       $("p.hint").remove();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI!</h1>
        <p class="hint"><strong>Napomena:</strong> Ako kliknete na dugme, ukloniće se ovaj paragraf.</p>
        <button type="button">Ukloni paragraf</button>
    </div>
</body>
</html>

jQuery metoda remove() takođe može uključiti selektor kao neobavezni parametar, koji vam omogućuje filtriranje elemenata koji se uklanjaju. Na primjer, kod za uklanjanje jQuery DOM-a iz prethodnog primjera mogao bi se napisati kao: 

<script>
$(document).ready(function(){
    // Ukloni paragrafe s klasom "hint" iz DOM-a
    $("button").click(function(){
       $("p").remove(".hint");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje elemenata iz DOM-a u jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Ukoloni paragrafe s klasom "hint" iz DOM-a klikom na dugme
    $("button").click(function(){
       $("p").remove(".hint");
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI!</h1>
        <p class="hint"><strong>Napomena:</strong> Ako kliknete na dugme, ukloniće se ovaj paragraf.</p>
        <button type="button">Ukloni paragraf</button>
    </div>
</body>
</html>

jQuery unwrap() metoda

jQuery metoda unwrap() uklanja nadređene elemente odabranih elemenata iz DOM-a. To je obrnuto od metode wrap(). Sljedeći primjer će ukloniti nadređeni element <p> elemenata klikom na dugme. 

<script>
$(document).ready(function(){
    // Ukloni roditeljski paragraf elementa
    $("button").click(function(){
       $("p").unwrap();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje roditelja elemenata iz DOM-a u jQuery</title>
<style>
.container{
    padding: 10px;
    background: #f0e68C;
    border: 1px solid #bead18;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Uklanja nadređeni element paragrafa klikom na dugme
    $("button").click(function(){
       $("p").unwrap();
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI!</h1>
        <p class="hint"><strong>Napomena:</strong> Ako kliknete na dugme, 
        ukloniće se nadređeni element ovog paragrafa.</p>
        <button type="button">Uklanjanje roditeljskog paragrafa</button>
    </div>
</body>
</html>

jQuery removeAttr() metoda

jQuery metoda removeAttr() uklanja atribut iz odabranih elemenata. Primjer u nastavku će uklonit atribut href iz elemenata <a> klikom na dugme. 

<script>
$(document).ready(function(){
    // Uklanja href atribut hiperveze (linka)
    $("button").click(function(){
       $("a").removeAttr("href");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje atributa iz elemenata u jQuery</title>
<style>
    a{
        font-size: 18px;
        margin-right: 20px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Uklanjanje hiperveze href atribut klikom na dugme
    $("button").click(function(){
        $("a").removeAttr("href");
    });
});
</script>
</head>
<body>
    <div class="container">
    <p>
        <a href="https://www.ittutorijali.net/">IT TUTORIJALI</a>
        <a href="https://www.ittutorijali.net/kursevi/jquery/uvod.php">jQuery</a>
        <a href="https://www.ittutorijali.net/kursevi/html5/uvod.php">HTML5-CSS3</a>
    </p>
        <button type="button">Ukloni atribute</button>
    </div>
</body>
</html>