Ciao
sono di nuovo qui per chiedere aiuto. Precisazione, so di mischiare JS con Jquery ma prima di passare del tutto a JQuery voglio fare un po di pratica e procedere con calma.
Vorrei realizzare una lista dinamica di oggetti (qui nell'esempio una serie di < li >). Tramite un pulsante "+" vorrei aggiungere tali elementi e tramite un pulsante "-" vorrei toglierli.
Per l'aggiunta non ho problemi, mentre faccio confusione quando si tratta di toglierli. Prima di passare al codice ecco cosa ottengo "graficamente". Ogni volta che premo il + creo una nuovo elemento con un nome a caso.
testo1
testo141
testo123
pulsante "+" ==== pulsante "-"
Il mio problema è quando devo togliere un elemento. Clicco sul pulsante "-" e con il codice che avevo scritto prima, toglievo ogni volta il primo elemento della lista. Potrebbe anche andare bene se non fosse che poi ogni volta che premo il "+" viene ad aggiungersi un nuovo elemento in coda, lasciando uno o piu spazi in alto. E cosi fa proprio schifo!
Vorrei togliere, ogni volta che premo il pulsante "-" l'ultimo elemento della lista. Avevo pensato di mettere degli array ma nn riesco ad accedervi. E poi sono passato ai < li > perché mi pareva più semplice ma non riesco nel mio intento.
Ho pensato questo: leggo quanti sono gli elementi[*] nel <ul>, vado all'ultimo e poi con il metodo .remove() lo tolgo dalle scatole. Ma non riesco a capire come fare per ottenere la lunghezza di tale elemento al fine di posizionarmi alla posizione che desidero.
Scusate se ho scritto molto, spero di essere stato chiaro.
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
font-family:tahoma,verdana;
color:#404040;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="scrips.js"></script>
<title>Pagina HTML5</title>
</script>
</head>
<body>
<div id='risultato'>
<ul id='menu' class='menu'>
[/list]
</div>
<input type='button' id='aggiungi' value='+' onclick='creaInput()'/>
<input type='button' id='togli' value='-' onclick='togli()'/>
</body>
</html>
Questo è invece il banalissimo file js che uso:
codice:
function creaInput()
{
var nome = "testo" + (Math.round(Math.random()*100));
$("#menu").append("[*]" + nome +"");
}
function togli()
{
// questo mi tira fuori tutto il contenuto del <ul>
var testo = $("ul.menu").text();
// questo dovrebbe dire la lunghezza. In realtà tira fuori sempre un valore = 1
var lunghezza = $("ul.menu").length;
alert(lunghezza);
// vecchio codice cancellato
...........................
}