Lekce 4 - Odstraňování obsahu v jQuery (DOM)

V minulé lekci, Nahrazování obsahu & klonování v jQuery (DOM), jsme se naučili nahrazovat a klonovat obsah stránky pomocí javascriptové knihovny jQuery.

V dnešním tutoriálu si ukážeme odstraňování obsahu, vyzkoušíme si to také na příkladech.

Opět si vytvoříme HTML soubor a JS soubor. Do JS si vložíme základní kostru.

$(function(){
    // Kód, který se spustí až po načtení stránky
});

Do HTML si vložíme následující kód:

<ul>
    <li>Pondělí</li>
    <li>Úterý</li>
    <li>Středa</li>
    <li>Čtvrtek</li>
    <li>Pátek</li>
    <li>Sobota</li>
    <li>Neděle</li>
</ul>

A rovnou si k dokumentu přidáme také styly:

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

ul li {
    font-family: 'Open Sans';
    font-size: 18px;
    margin: 10px 20px;
    padding: 5px 10px;
    background: #0080C0;
    width: 100px;
    color: #ededed;
}

Náš dokument nyní vypadá takto:

Naučíme se odstraňovat obsah pomocí jQuery metod, kterými jsou remove(), empty() a detach(). Pojďme si je tedy představit!

remove()

Metoda remove() odstraní nadobro vybrané elementy z DOM. Použití je jako vždy jednoduché, stačí napsat:

$('ul li').remove();

Výsledek:

Čímž jsme odstranili všechny položky seznamu.

Ukázka #1

Zkusme odstranit položky až po kliknutí. To uděláme jednoduše připojením události kliknutí na položku seznamu metodou on('click'). Události jako další argument předáme anonymní funkci s obsluhou události. Uvnitř poté odstraníme položku, na kterou jsme klikli. Tu získáme pomocí $(this).

$("ul li").on('click', function() {
    $(this).remove();
});

Živé demo:

Bezvadné, vše nám funguje. Mimochodem, pomocí funkce $() si kromě proměnné this můžeme obalit kterýkoli element v čistém JavaScriptu, na kterém následně půjdou volat jQuery metody.

Můžeme se pustit do další ukázky.

Ukázka #2

Co když například budeme chtít odstranit všechny elementy, které obsahují nějaké slovo, nebo jeho část, například "ek"? Na to nám poslouží "doplňující selektor" filter(), který filtruje náš aktuální selektor. V filter() použijeme ":contains('ek')", což nám vybere všechny elementy, které obsahují text 'ek'. Pozor, filtr je case sensitive, záleží tedy na velikosti písmen.

$('ul li').filter(":contains('ek')").remove();

Výsledek:

Působivé, že? Zápis je ovšem stále poněkud zdlouhavý. Metoda remove() nám nabízí uvést jako argument selektor, můžeme náš kód upravit na:

$('ul li').remove(":contains('ek')");

Čímž dosáhneme stejného efektu. Zkusme si ještě odstranit "Sobota" a "Neděle. Jako selektor nám nyní bude sloužit `), :contains('Ne­děle')"`.

$('ul li').remove(":contains('Sobota'), :contains('Neděle')");

Nyní tedy víme, kdy máme chodit do školy či do práce :

Protože jsme si již remove() důkladně procvičili, přejdeme dále.

empty()

Metoda empty(), v překladu vyprázdnit, vyprázdní daný element od veškerého obsahu. Metoda nepřijímá žádný argument.

Ukázka #3

Pojďme si ukázat, jak se dá vyprázdnit položka "Úterý". Přidejme si na položku úterý id="den2".

<ul>
    <li>Pondělí</li>
    <li id="den2">Úterý</li>
    <li>Středa</li>
    <li>Čtvrtek</li>
    <li>Pátek</li>
    <li>Sobota</li>
    <li>Neděle</li>
</ul>

A JS kód:

$('#den2').empty();

Výsledek:

Jednoduché.

Ukázka #4

Pokud bychom chtěli opět vyprázdnit element, který obsahuje nějakou část textu, stačí použít filter().

$('ul li').filter(':contains("e")').empty();

Výsledek:

Nyní nám varianta, kde jsme jako argument metody přidali selektor, nebude fungovat. Můžete si to vyzkoušet.

$('ul li').empty(':contains("e")');

Uvidíte, že metoda empty() argument ignoruje a vykoná vše jako by tam nebyl.

detach()

Detach znamená v překladu odpojit. Metoda nám vyjme element (podobně jako když použijeme Ctrl + X), který následně můžeme uložit do nějaké proměnné.

Ukázka #5

Vytvoříme si pod seznamem odstavec, který bude obsahovat text "Nic tu není".

Do našeho HTML přidáme:

<p>Nic tu není</p>

Nyní zkusme vyjmout položku "Úterý" (má id #den2). Po vyjmutí vložíme element #den2 do odstavce, jehož obsah tím přepíšeme.

$('p').text($('#den2').detach().text());

Výsledek:

Na tento konkrétní příklad by se více hodila např. metoda append(). Pojďme si tedy ukázat, jak detach() využít lépe!

Ukázka #6

Metoda detach() je vhodná jakmile chceme vybrat nějaké elementy a později je někam vložit. Pojďme si tedy udělat takovou malou hříčku. Po kliknutí na položku našeho listu tuto položku detachujeme a uložíme ji do proměnné typu pole. Při kliknutí na odstavec do něj vložíme všechny položky z tohoto pole.

Pole si vytvořme ještě před registrováním on('click'), proměnnou pojmenujme např. sklad.

let sklad = [];

Po kliknutí na odstavec jej vyčistíme pomocí empty(). Poté zavoláme metodu $.each(), které předáme jako parametr sklad, jakožto proměnnou, se kterou bude pracovat. Dále vytvoříme anonymní funkci, která bude přijímat parametry i a v. Parametr i je jako index a v jako value.

let sklad = [];

$('ul li').on('click', function() {
    sklad.push($(this).detach());
});

$('p').on('click', function() {
    let toto = $(this);
    $(toto).empty();
    $.each(sklad, function(i, v) {
        $(toto).append(v);
    });
})

Živé demo:

Vše by nám mělo fungovat, vyzkoušejte si to.

V příští lekci, Třídy v jQuery (DOM), si ukážeme jak v jQuery manipulovat se třídami elementů.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.