{"id":1247,"date":"2011-05-17T22:55:45","date_gmt":"2011-05-17T21:55:45","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=1247"},"modified":"2011-07-18T23:37:17","modified_gmt":"2011-07-18T22:37:17","slug":"jquery-il-metodo-remove","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/guide_tutorial\/javascript\/jquery-il-metodo-remove\/","title":{"rendered":"JQuery, il metodo .remove()"},"content":{"rendered":"<p>Il metodo<span style=\"color: #ff0000;\"> remove()<\/span> del framerwork jQuery permette di <strong>rimuovere un elemento<\/strong> html dal <strong>DOM<\/strong> della pagina.<br \/>\nDiversamente da tutti i metodi che modificando il css rendono &#8220;invisibile&#8221; un elemento, il metodo remove() elimina in maniera quasi del tutto definitiva l&#8217;elemento, rendendo <strong>nulli<\/strong> tutti i successivi riferimenti ad esso.<br \/>\nLa sintassi, come \u00e8 buona abitudine di jQuery, \u00e8 molto<em> semplice<\/em> e grazie all&#8217;uso dei vari selettori disponibili le possibilit\u00e0 di utilizzo del metodo .remove() sono pressoch\u00e8 infinite.<br \/>\nPotremo ad esempio associare il metodo ad alcuni bottoni o link delle nostre pagine, permettendo agli utenti di <em>&#8220;eliminare&#8221;<\/em> i contenuti che non desiderano consultare. Pensiamo ad esempio ad una finestra in sovraimpressione che mostra al suo interno un banner: sarebbe <em>elengante e cortese<\/em> fornire un icona di chiusura che ne permetta la rimozione definitiva dalla pagina.<\/p>\n<p>La sintassi di base del metodo .remove() \u00e8 la seguente:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$('id_elemento').remove();\r\n<\/pre>\n<p>Tramite il<strong> selettore ID <\/strong>andremo a rimuovere l&#8217;elemento il cui id \u00e8 uguale a &#8220;<em>id_elemento<\/em>&#8220;. Dopo l&#8217;esecuzione del semplice codice proposto, vedremo &#8220;scomparire&#8221;, in maniera quasi brutale, l&#8217;elemento dalla pagina web e nel DOM non ne rester\u00e0 pi\u00f9 traccia.<br \/>\nVediamo ora qualche altro esempio utilizzando gli altri selettori disponibili:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Selettore di classe\r\n$('.nome_classe').remove();\r\n\r\n\/\/ Selettore di tag\r\n$('p').remove();\r\n\r\n\/\/ Selettore di contenuto\r\n$(&quot;p:contains('Ciao')&quot;).remove();\r\n<\/pre>\n<p>Negli esempi proposti, i vari selettori operano su <strong>pi\u00f9 elementi<\/strong> (ad esempio tutti gli elementi appartenenti ad una determinata <em>classe<\/em>, tutti i blocchi di <em>tipo &lt;p&gt;<\/em> oppure tutti gli elementi di tipo &lt;p&gt; che <em>contengono la parola &#8216;Ciao&#8217;<\/em>), quindi invocando il metodo remove() elimineremo tutti questi elementi grazie ad una sola riga di codice.<br \/>\nPrima di concludere prendiamo in considerazione due <em>aspetti del metodo remove()<\/em>:<\/p>\n<ul>\n<li>un elemento rimosso non pu\u00f2 essere recuperato;<\/li>\n<li>la rimozione degli elementi tramite class comporta la rimozione di tutti gli elementi appartenenti a quella classe, indipendetemente dal tipo di elemento (DIV, SPAN, P, ecc);<\/li>\n<\/ul>\n<p>Per porre, in parte, rimedio al primo caso possiamo <strong>memorizzare l&#8217;elemento<\/strong> (in una sorta di cache) prima che questo venga rimosso:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Memorizzo l'elemento in una variaibile\r\nvar elemento = $('#id_elemento');\r\n\r\n\/\/ Rimuovo l'elemento\r\n$('#id_elemento').remove();\r\n<\/pre>\n<p>Il blocco nonostante sia stato eliminato dalla pagina web, \u00e8 ancora presente in una variabile (<em>var elemento<\/em>), e pu\u00f2 essere riutilizzato e volendo riposizionato all&#8217;interno del DOM, magari in un&#8217;altra posizione.<br \/>\nPer il secondo caso in analisi, invece, \u00e8 necessario utilizzare il metodo remove() in maniera leggermente differente da come si \u00e8 visto fino ad ora; possiamo cos\u00ec\u00a0<strong>filtrare solo alcuni elementi<\/strong> da rimuovere che hanno una classe in comune, evitando la rimozione complessiva di tutti i blocchi:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Rimozione solo dei div con classe 'nome_classe'\r\n$('div').remove('.nome_classe');\r\n<\/pre>\n<p>Grazie alla riga di codice proposta, andremo ad eliminare gli elementi che hanno come nome classe &#8220;<em>nome_classe<\/em>&#8221; ma solo se di tipo DIV. Da notare, quindi la differenza con il codice proposto all&#8217;inizio dell&#8217;articolo, quando effettuavamo la rimozione di tutti gli elementi tramite selettore di classe.<br \/>\nLe funzioni viste sono state <strong>raccolte in una pagina web d\u2019esempio<\/strong>.<\/p>\n<p><strong>Cliccando <a href=\"http:\/\/www.donatantonio.net\/script\/jquery_remove\/index.html\" target=\"_blank\">qui<\/a><\/strong> \u00e8 possibile vedere in azione il codice.<\/p>\n<p><strong>Cliccando <a href=\"http:\/\/www.donatantonio.net\/script\/jquery_remove.rar\" target=\"_blank\">qui<\/a><\/strong> \u00e8 possibile scaricare il codice.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il metodo remove() del framerwork jQuery permette di rimuovere un elemento html dal DOM della pagina.<br \/>\nDiversamente da tutti i metodi che modificando il css rendono &#8220;invisibile&#8221; un elemento, il metodo remove() elimina in maniera quasi del tutto definitiva l&#8217;elemento, rendendo nulli tutti i successivi riferimenti ad esso.<br \/>\nLa sintassi, come \u00e8 buona abitudine di jQuery, \u00e8 molto<em> semplice<\/em> e grazie all&#8217;uso dei vari selettori disponibili le possibilit\u00e0 di utilizzo del metodo .remove() sono pressoch\u00e8 infinite.<br \/>\nPotremo ad esempio associare il metodo ad alcuni bottoni o link delle nostre pagine, permettendo agli utenti di <em>&#8220;eliminare&#8221;<\/em> i contenuti che non desiderano consultare. Pensiamo ad esempio ad una finestra in sovraimpressione che mostra al suo interno un banner: sarebbe <em>elengante e cortese<\/em> fornire un icona di chiusura che ne permetta la rimozione definitiva dalla pagina.<\/p>\n<p>La sintassi di base del metodo .remove() \u00e8 la seguente:<\/p>\n<p>$(&#8216;id_elemento&#8217;).remove();<\/p>\n<p>Tramite il selettore ID andremo a rimuovere l&#8217;elemento il cui id \u00e8 uguale a &#8220;<em>id_elemento<\/em>&#8220;. Dopo l&#8217;esecuzione del semplice codice proposto, vedremo &#8220;scomparire&#8221;, in maniera quasi brutale, l&#8217;elemento dalla pagina web e nel DOM non ne rester\u00e0 pi\u00f9 traccia.<br \/>\nVediamo ora qualche altro esempio utilizzando gli altri selettori disponibili:<\/p>\n<p>\/\/ Selettore di classe<br \/>\n$(&#8216;.nome_classe&#8217;).remove();<\/p>\n<p>\/\/ Selettore di tag<br \/>\n$(&#8216;p&#8217;).remove();<\/p>\n<p>\/\/ Selettore di contenuto<br \/>\n$(&quot;p:contains(&#8216;Ciao&#8217;)&quot;).remove();<\/p>\n<p>Negli esempi proposti, i vari selettori operano su pi\u00f9 elementi (ad esempio tutti gli elementi appartenenti ad una determinata <em>classe<\/em>, tutti i blocchi di <em>tipo &lt;p&gt;<\/em> oppure tutti gli elementi di tipo &lt;p&gt; che <em>contengono la parola &#8216;Ciao&#8217;<\/em>), quindi invocando il metodo remove() elimineremo tutti questi elementi grazie ad una sola riga di codice.<br \/>\nPrima di concludere prendiamo in considerazione due <em>aspetti del metodo remove()<\/em>:<\/p>\n<p>un elemento rimosso non pu\u00f2 essere recuperato;<br \/>\nla rimozione degli elementi tramite class comporta la rimozione di tutti gli elementi appartenenti a quella classe, indipendetemente dal tipo di elemento (DIV, SPAN, P, ecc);<\/p>\n<p>Per porre, in parte, rimedio al primo caso possiamo memorizzare l&#8217;elemento (in una sorta di cache) prima che questo venga rimosso:<\/p>\n<p>\/\/ Memorizzo l&#8217;elemento in una variaibile<br \/>\nvar elemento = $(&#8216;#id_elemento&#8217;);<\/p>\n<p>\/\/ Rimuovo l&#8217;elemento<br \/>\n$(&#8216;#id_elemento&#8217;).remove();<\/p>\n<p>Il blocco nonostante sia stato eliminato dalla pagina web, \u00e8 ancora presente in una variabile (<em>var elemento<\/em>), e pu\u00f2 essere riutilizzato e volendo riposizionato all&#8217;interno del DOM, magari in un&#8217;altra posizione.<br \/>\nPer il secondo caso in analisi, invece, \u00e8 necessario utilizzare il metodo remove() in maniera leggermente differente da come si \u00e8 visto fino ad ora; possiamo cos\u00ec\u00a0filtrare solo alcuni elementi da rimuovere che hanno una classe in comune, evitando la rimozione complessiva di tutti i blocchi:<\/p>\n<p>\/\/ Rimozione solo dei div con classe &#8216;nome_classe&#8217;<br \/>\n$(&#8216;div&#8217;).remove(&#8216;.nome_classe&#8217;);<\/p>\n<p>Grazie alla riga di codice proposta, andremo ad eliminare gli elementi che hanno come nome classe &#8220;<em>nome_classe<\/em>&#8221; ma solo se di tipo DIV. Da notare, quindi la differenza con il codice proposto all&#8217;inizio dell&#8217;articolo, quando effettuavamo la rimozione di tutti gli elementi tramite selettore di classe.<br \/>\nLe funzioni viste sono state raccolte in una pagina web d\u2019esempio.<\/p>\n<p>Cliccando qui \u00e8 possibile vedere in azione il codice.<\/p>\n<p>Cliccando qui \u00e8 possibile scaricare il codice.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[301,300,298,299],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1247"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=1247"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1247\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=1247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=1247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=1247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}