Appunti e tutorial su front-end web technology

La differenza tra remove() ed empty() è che mentre la prima funzione rimuove l’elemento selezionato dalla pagina e quindi non è più presente, controllare dall’ispettore degli elementi per credere, la seconda funzione semplicemnte lo svuota lasciandolo però all’interno della pagina stessa. Sarà necessario quindi inserire nella pagina due paragrafi a cui metteremo un bordino rosso con un css:

p {border: 1px solid red; }
...
<p id="remove">Questo paragrafo sparisce con la funzione remove()</p>
<p id="empty">Questo paragrafo si svuota con la funzione empty()</p>

Il primo lo rimuoveremo dalla pagina direttamente cliccandoci sopra, mentre il secondo verrà svuotato e quindi resterà solo il bordo rosso nella pagina:

$(document).ready(function() {
$('p#remove').click(function() {
$(this).remove();
});
$('p#empty').click(function() {
$(this).empty();
});
});

L’esempio

Una delle funzioni più potenti di jQuery è sicuramente la funzione clone(), per mette di clonare porzioni di codice, magari a partire da un template opportunamente costruito e stando attenti alla duplicazione di id o name nel caso dei form.

Sarà proprio un form il caso in cui andremo a testare l’utilizzo della nostra funzione. Partiamo dall’html:

<form action="" method="post">
<h2>Campi singoli</h2>
<label for="primo">Primo</label><br>
<input type="text" name="primo"><br><br>
<label for="secondo">Secondo</label><br>
<input type="text" name="secondo"><br><br>
<h2>Campi ripetuti</h2>
<button id="add">Add</button><br>
<div id="target"></div>
</form>
<div id="template">
<label for="terzo">Terzo</label><br>
<input type="text" name="terzo" ></br><br>
</div>

Il form è piuttosto normale, sono de le cose importanti da notare: il div con id target e il div con id template, questo sarà nascosto tramite css, ma sarà proprio questo l’elemento che andremo a clonare.

Si tratterò quindi di prendere tutto il conteuto del tag dic con id template, clonarlo e poi personalizzare il testo della label e il name del campo di input

$(document).ready(function() {
var rowCount = 0;
$('#add').click(function() {
$('#template *')
.clone()
.filter('input')
.attr('name', function(index, name) {
return name +'[' + rowCount + ']';
})
.end()
.filter('label').text( function(index, name) {
return name +'[' + rowCount + ']';
})
.end()
.appendTo('#target');
rowCount++;
return false;
});
});

Vediamo un attimo il codice con più calma: impostiamo un contatore a zero, poi al click sul bottone prendiamo tutto il contenuto di template(‘#template *’), lo cloniamo cerchiamo il tag input con la funzione filter e assegniamo all’attributo name il valore restituito dalla funzione che prende l’attributo name e gli aggiunge il valore del contatore. Ripetiamo la stessa operazione perla label, appendiamo tutto al target e incrementiamo il contatore per la prossima aggiunta.

L’esempio