Lezione #id-jq-2013-0016#
JQuery ci permette di togliere dinamicamente dei contenuti testuali alla nostra pagina web, vediamo come con alcuni semplici esempi..
Metodo: remove() -> rimuove l’elemento selezionato e tutti i suoi figli
Vediamo il seguente codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <script type= "text/javascript" src= "js/jquery-2.0.3.js" ></script> <script> $(document).ready( function (){ $( "button" ).click( function (){ $( "#div1" ).remove(); }); }); </script> </head> <body> <div id= "div1" style= "height:100px;width:300px;border:1px solid black;background-color:green;" > Un testo per il divisorio <p>Paragrafo 1 del divisorio</p> <p class = "italic" ><i>Paragrafo 2 del divisorio</i></p> </div> <br> <button>Rimuovi l'elemento con remove()</button> </body> </html> |
Che traducendo:
1- $(document).ready(function(){ -> JQuery verifica che tutto il documento sia caricato
2- $(“button”).click(function(){ -> al click sull’elemento – button –
3- $(“#div1”).remove(); -> rimuovi il tag con – id=div1 -, rimuovi anche tutti i figli.
Se voglio essere più preciso nella rimozione degli elementi figli posso utilizzare la sintassi completa:
1 2 3 | $( "#div1" ).remove( ".italic" ); $( "elemento selezionato" ).remove( "elemento figlio" ); |
Metodo: empty() -> rimuove SOLO gli elementi figlio dell’elemento selezionato.
Vediamo il codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <script type= "text/javascript" src= "js/jquery-2.0.3.js" ></script> <script> $(document).ready( function (){ $( "button" ).click( function (){ $( "#div1" ).empty(); }); }); </script> </head> <body> <div id= "div1" style= "height:100px;width:300px;border:1px solid black;background-color:green;" > Un testo per il divisorio <p>Paragrafo 1 del divisorio</p> <p class = "italic" ><i>Paragrafo 2 del divisorio</i></p> </div> <br> <button>Rimuovi l'elemento con empty()</button> </body> </html> |
Mettiamo in pratica quanto detto finora:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <script type= "text/javascript" src= "js/jquery-2.0.3.js" ></script> <script> $(document).ready( function (){ $( "#btn1" ).click( function (){ $( "#div1" ).empty(); }); $( "#btn2" ).click( function (){ $( "#div2" ).remove(); }); }); </script> </head> <body> <div id= "div1" style= "height:100px;width:300px;border:1px solid black;background-color:green;" > Un testo per il divisorio <p>Paragrafo 1 del divisorio</p> <p class = "italic" ><i>Paragrafo 2 del divisorio</i></p> </div> <br> <button id= "btn1" >Rimuovi l 'elemento con empty()</button> <br><br><br> <div id="div2" style="height:100px;width:300px;border:1px solid black;background-color:green;"> Un testo per il divisorio <p>Paragrafo 1 del divisorio</p> <p class="italic"><i>Paragrafo 2 del divisorio</i></p> </div> <br> <button id="btn2">Rimuovi l' elemento con remove()</button> </body> </html> |