Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

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

JavaScript jQuery Odstraňování obsahu v jQuery (DOM) American English version English version

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 jako vždy různé způsoby 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:

Your page
localhost

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:

Your page
localhost

Čí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:

Your page
localhost

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:

Your page
localhost

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 :) :

Your page
localhost

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:

Your page
localhost

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:

Your page
localhost

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:

Your page
localhost

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:

Your page
localhost

Toto je již větší zábava :) 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ů.


 

Stáhnout

Staženo 295x (1.23 kB)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
13 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Třídy v jQuery (DOM)
Aktivity (3)

 

 

Komentáře

Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:23.2.2014 13:32

Pěkné, o předávání argumentů v .remove() jsem nevěděl. A o fci .deteach() taky ne :)

Editováno 23.2.2014 13:32
Odpovědět 23.2.2014 13:32
"nikdy nepiš nic 2x"
Avatar
Radomír Panna:10.9.2014 8:57

Zdar, jeden takový všetečný dotaz. Nějak jsem nepobral kdy se píše ' a kdy " . Většinou fungovaly ', ale u

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

jsem narazil.

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

nefunguje. Jak to tedy je?

 
Odpovědět 10.9.2014 8:57
Avatar
Odpovídá na Radomír Panna
Michal Štěpánek:10.9.2014 10:27

u jednoho elementu nemůžeš použít stejné uvozovky dvakrát, musíš to kombinovat. Když použiješ stejné uvozovky, ten element si to přebere blbě, protože nepozná začátek a konec uvozovek a nerozezná, které uvozovky patří k sobě...

':contains('
')'

správně

":contains('ek')"
Editováno 10.9.2014 10:28
Odpovědět 10.9.2014 10:27
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na Michal Štěpánek
1Pupik1989:10.9.2014 11:58

Může je escapovat.

':contains(\'ek\')'
 
Odpovědět 10.9.2014 11:58
Avatar
Odpovídá na 1Pupik1989
Michal Štěpánek:10.9.2014 14:26

jen jsem vysvětlil, jak to program chápe při takovém zápisu...

Odpovědět 10.9.2014 14:26
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.