Elementen verwijderen

★ Open dom/remove.html. ★ Bekijk de broncode en test de pagina in een browser.

$('#remove1').click(function() {
    $('#lijst1 b').empty();
});
$('#remove2').click(function() {
    $('#lijst2 b').remove();
});
$('#remove3').click(function() {
    var lijst3 = $('#lijst3').detach(); 
    lijst3.insertAfter('h1');
});

De eerste twee methodes geven op het eerste zicht net hetzelfde resultaat, maar schijn bedriegt.

De methode empty() maakt enkel de b-tags binnen #lijst1 leeg. De b-tags zelf, blijven in de code aanwezig. De methode remove() verwijdert de inhoud samen met de b-tags.

De methode detach() verwijdert de selectie uit het beeld, maar niet uit het geheugen. Omdat de inhoud niet echt verdwenen is, kunnen we deze makkelijk verplaatsen. U kan dit best vergelijken met een knip-en-plakoperatie. In ons voorbeeld knippen we #lijst3 uit het document en plakken deze vervolgens net achter de h1-tag.