4. diel - Odstraňovanie obsahu v jQuery (DOM)

V minulej lekcii, Nahradzovanie obsahu & klonovania v jQuery (DOM) , sme sa naučili nahrádzať a klonovať obsah stránky pomocou javascriptové knižnice jQuery. V dnešnom tutoriále si ukážeme odstraňovanie obsahu, vyskúšame si ako vždy rôzne spôsoby na príkladoch.

Opäť si vytvoríme HTML súbor a JS súbor. 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 nasledujúci 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 rovno si k dokumentu pridáme tiež štýly:

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 teraz vyzerá takto:

Naučíme sa odstraňovať obsah pomocou jQuery metód, ktorými sú remove(), empty() a detach(). Poďme si ich teda predstaviť!

Remove ()

Metóda remove() odstráni nadobro vybrané elementy z DOM. Použitie je ako vždy jednoduché, stačí napísať:

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

výsledok:

Čím sme odstránili všetky položky zoznamu.

Ukážka # 1

Skúsme odstrániť položky až po kliknutí. To urobíme jednoducho pripojením udalosti kliknutí na položku zoznamu metódou on('click'). Udalosti ako ďalší argument odovzdáme anonymný funkciu s obsluhou udalosti. Vnútri potom odstránime položku, na ktorú sme klikli. Tú získame pomocou $(this).

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

Živé demo:

Bezchybné, všetko nám funguje. Mimochodom, pomocou funkcie $() si okrem premennej this môžeme obaliť ktorýkoľvek element v čistom JavaScriptu, na ktorom následne pôjdu volať jQuery metódy.

Môžeme sa pustiť do ďalšej ukážky.

Ukážka # 2

Čo keď napríklad budeme chcieť odstrániť všetky elementy, ktoré obsahujú nejaké slovo, alebo jeho časť, napríklad "ek" ? Na to nám poslúži "doplňujúce selektor" filter(), ktorý filtruje náš aktuálny selektor. V filter() použijeme ":contains('ek')", čo nám vyberie všetky elementy, ktoré obsahujú text 'ek'. Pozor, filter je case sensitive, záleží teda na veľkosti písmen.

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

výsledok:

Pôsobivé, že? Zápis je však stále trochu zdĺhavý. Metóda remove() nám ponúka uviesť ako argument selektor, môžeme náš kód upraviť na:

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

Čím dosiahneme rovnaký efekt. Skúsme si ešte odstrániť "Sobota" a **"Nedeľa ** . Ako selektor nám teraz bude slúžiť `),: contains ( 'Nedeľa')" `.

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

Teraz teda vieme, kedy máme chodiť do školy či do práce :

Pretože sme si už remove() dôkladne precvičili, prejdeme ďalej.

Empty ()

Metóda empty(), v preklade vyprázdniť, vyprázdni daný element od všetkého obsahu. Metóda neprijíma žiadny argument.

Ukážka # 3

Poďme si ukázať, ako sa dá vyprázdniť položka "Utorok". Pridajme si na položku utorok 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ýsledok:

Jednoduché.

Ukážka # 4

Ak by sme chceli opäť vyprázdniť element, ktorý obsahuje nejakú časť textu, stačí použiť filter().

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

výsledok:

Teraz nám variant, kde sme ako argument metódy pridali selektor, nebude fungovať. Môžete si to vyskúšať.

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

Uvidíte, že metóda empty() argument ignoruje a vykoná všetko ako by tam nebol.

Detach ()

Detach znamená v preklade odpojiť. Metóda nám vyjme element (podobne ako keď použijeme Ctrl + X), ktorý následne môžeme uložiť do nejakej premennej.

Ukážka # 5

Vytvoríme si pod zoznamom odsek, ktorý bude obsahovať text "Nič tu nie je".

Do nášho HTML pridáme:

<p>Nic tu není</p>

Teraz skúsme vybrať položku "Utorok" (má id #den2). Po vybratí vložíme element #den2 do odseku, ktorého obsah tým prepíšeme.

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

výsledok:

Na tento konkrétny príklad by sa viac hodila napr. Metóda append(). Poďme si teda ukázať, ako detach() využiť lepšie!

Ukážka # 6

Metóda detach() je vhodná len čo chceme vybrať nejaké elementy a neskôr ich niekam vložiť. Poďme si teda urobiť takú malú hračku. Po kliknutí na položku nášho liste túto položku detachujeme a uložíme ju do premennej typu poľa. Pri kliknutí na odsek doň vložíme všetky položky z tohto poľa.

Pole si vytvorme ešte pred registrovaním on('click'), premennú pomenujte napr. sklad.

let sklad = [];

Po kliknutí na odsek ho vyčistíme pomocou empty(). Potom zavoláme metódu $.each(), ktoré odovzdáme ako parameter sklad, ako premennú, s ktorou bude pracovať. Ďalej vytvoríme anonymný funkciu, ktorá bude prijímať parametre i a v. Parameter i je ako index a v ako 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:

Toto je už väčšia zábava Všetko by nám malo fungovať, vyskúšajte si to. V budúcej lekcii, Triedy v jQuery (DOM) , si ukážeme ako v jQuery manipulovať so triedami elementov.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.