Aggiungere contenuto HTML usando jQuery

Recentemente ho ripreso a programmare la mia prima web-app: la conversione del software per il calcolo di una fognatura bianca scritto in BASIC. Ho focalizzato la mia attenzione sull'interfaccia dati di input e nonostante la facilità e la versatilità di jQuery, mi sono perso in alcuni dettagli. Ho si raggiunto un "risultato", ma non è al momento pienamente funzionale. Nell'articolo mostrerò come si possa inserire e togliere contenuto in HTML usando le funzioni previste da questa fantastica libreria.

jQuery presenta molte funzioni per la gestione degli elementi che formano la pagina web, dalla semplice sostituzione di HTML, al preciso posizionamento di nuovo codice in relazione ad un particolare oggetto, fino alla completa rimozione dei tag e del contenuto di una pagina.

Dopo aver definito l'elemento (id, class o un semplice tag), è possibile aggiungere o rimuovere o appendere quello che si vuole! Per esempio ho creato due pulsanti: "+" e "-". Dopo aver fatto clic sul primo, appare una riga in cui è possibile aggiungere un nuovo tipo di tubazione composto da: etichetta, scabrezza, tipo di sezione e diametri commerciali. Ho chiamato questa funzione addPipe() ed è qui sotto riportata:

function addPipe(){
if (typeof pipe === 'undefined') {pipe=0};
pipe=pipe+1;
$('#box_pipe').before('<div id="pipe"><ul class="onRow"><li><input class="txtClass" name="labelPipe" type="text" id="labelPipe"  defaultVal="default" size="10"  /></li><li><input class="txtClass" name="roughnessPipe" type="text" id="roughnessPipe"  defaultVal="90" size="10"  /></li><li><select id="secType"><option class="lang_circular" value="0">circular</option><option class="lang_ovoid" value="1">ovoid</option><option class="lang_otherSec" value="3">other section...</option></select></li><ul id="prova"></ul><li id="ultimo"><input class="txtClass" name="diametro" type="text" id="diametro"  defaultVal="00.00" size="5"  /><input type="button" name="add"  style="width:20px" value="+" onclick="addDiam()"  /><input type="button" name="add"  style="width:20px" value="-" onclick="removeDiam()"  /><input type="button" name="add"  style="width:20px" value="O" onclick="orderDiam()"  /></li></ul><br clear="all"></div>');    
}

E' proprio pessima, non c'è che dire! Il codice è molto lacunoso e difficile da leggere. Dovrò trovare un altro modo per renderla più funzionale e chiara. Fortunatamente la funzione per rimuovere questa tubazione è molto meglio:

function removePipe(){
$("#pipe").remove();
}

All'interno di ogni tubazione poi ho aggiunto altre 3 funzioni relative ai diametri commerciali: aggiunta, rimozione e loro messa in ordine crescente[fn]L'ho trovata consultando Stack Overflow: Order (sort) <li> list with numeric content using JQuery. Tuttavia non so ancora come cancellare gli elementi doppi.[/fn].

function addDiam(){
diametro = $('#diametro').val();
pipe_number="<li id='penultimo'>" + diametro + "</li>";
$('#prova').append(pipe_number);
}

function removeDiam(){
$('#penultimo').remove();
//$('penultimo').remove();
}

function orderDiam(){
var li = $('ul#prova li');

li.sort(function(a, b) {
    if(parseInt($(a).text()) > parseInt($(b).text()))
        return 1;
    else return -1;
});
$('ul#prova').empty().html(li);
}

Pur non essendo perfetti e corretti, in qualche modo funzionano. I problemi nascono quando si cerca di inserire più di una tubazione, come è possibile constatare provando la versione demo. Mentre qui ho messo tutti i file zippati: storm_sewer_content.zip. Spero di sistemarli il prima possibile, ma come sempre accetto suggerimenti e correzioni!!