5. díl - Odstraňování obsahu v jQuery (DOM)

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

V tomto článku si ukážeme, jak můžeme manipulovat s jQuery pomocí odstraňování obsahu, vyzkoušíme si i různé možnosti na příkladech.

Začneme tím, že si vytvoříme HTML soubor a JS soubor.

Do JS si vložíme základní kostru.

$(function(){
  ... kód ...
});

Do HTML si vložíme tento 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 přidáme také styly.

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

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

.remove()

Remove je funkce, která odstraní/vymaže nadobro vybrané elementy z DOM. Použití je jako vždy jednoduché, stačí napsat

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

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

ukázka #1

Zkusme odstranit položky až po kliku. To uděláme jednoduše připojením události .on('click') na naší položku v seznamu. Jako další argument funkce přidáme anonymní funkci, kde bude probíhat zbytek našeho kódu. Odstraňovat pak budeme položku, na kterou jsme klikli. Tu získáme jako $(this);

$("ul li").on('click', function(){
   $(this).remove();
});
Odstraňování obsahu v jQuery

Bezvadné, vše nám funguje a 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 - na stejné úrovni. V .filter() použijeme ":contains('ek')", což nám vybere všechny elementy, které obsahují 'ek'. Pozor, je to case sensitive.

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

Docela cool, že? Problém je, že je to poměrně zdlouhavé. Funkce .remove() nám ale nabízí uvést jako argument selektor, takže můžeme náš kód upravit na

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

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

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

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

Odstraňování obsahu v jQuery

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

.empty()

Empty, v překladu něco jako vyprázdnit, je funkce, která vyprázdní náš element od veškerého obsahu. Funkce 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".

$('#den2').empty();
Odstraňování obsahu v jQuery

Jednoduché.

ukázka #4

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

$('ul li').filter(':contains("e")').empty();
Odstraňování obsahu v jQuery

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

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

Vidíme, že funkce argument "neřeší" a vykoná vše jako by tam nebyl.

.detach()

Detach znamená v překladu něco jako odpojit, sundat. Je to funkce, která nám vyjme element (tedy něco jako když použijeme CTRL + X) a následně můžeme element uložit do nějaké proměnné.

ukázka #5

Vytvoříme si pod seznamem odstavec, který bude obsahovat text "Nic tu není". Nyní zkusme vyjmout položku Úterý (naše ID "den2"). Po vyjmutí vložíme #den2 do odstavce, který jim přepíšeme.

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

Ale přeci jen takto to používat není moc dobré, jelikož na to se hodí více jiné funkce, například .append(). No, pojďme si ukázat, jak se dá .detach() využít lépe!

ukázka #6

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 legraci, kde po kliku na položku detachujeme danou položku a uložíme ji do proměnné typu pole. Při kliku na odstavec do něj vložíme jednotlivé položky!

Vytvořme si ještě před .on('click') nějakou proměnnou, například sklad. Tu si vytvoříme jako pole, které budeme naplňovat elementy.

Po kliku na odstavec ho vyčistíme pomocí .empty(), pak zavoláme $.each, který bude obsahovat atribut sklad, jakožto proměnnou, se kterou bude pracovat. Dále vytvoříme anonymní funkci, která bude obsahovat atributy i a v. I jako index a V jako value.

var sklad = [];

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

$('p').on('click', function(){
   var toto = $(this);
   $( toto ).empty();
   $.each(sklad, function(i, v){
      $( toto ).append(v)
   });
})
Odstraňování obsahu v jQuery

Toto už je větší zábava ... :) Vše by nám mělo fungovat, vyzkoušejte to.


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (9 hlasů) :
4.888894.888894.888894.888894.88889


 


Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Třídy v jQuery (DOM)

 

 

Komentáře

Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:

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:

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:

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:

Může je escapovat.

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

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.