Rimozione elemento da lista

di
filipp01
il
2 risposte
F
filipp01
Pochi posts
Iscritto da
dic, 2018
Messaggi:
15

Rimozione elemento da lista

Dovrei realizzare un script javascript nella pagina che alla pressione del bottone elimini la relativa riga della lista.
Il codice scritto da me è il seguente: 
<!DOCTYPE html>

<html>
    <head>
        <title>Prova Esame</title>
        
        <style>
            body{
                width: 300px;
                margin: 0 auto;
            }
        </style>
        
    </head>
    <body>
        <h1>Lista da file JSON</h1>
        <ul>
            <?php
                $datafile = "data.json";

                $datastr = file_get_contents($datafile);

                $data = json_decode($datastr, true);
                $sum = 0;
                $output = "<ul>";
                foreach ($data['lista'] as $data) {
                    $output .= "<li id='myLi'>".$data['Descrizione']."  ".$data['Numero']."\t<button id='delete' onclick='deleteList()'><b>-</b></button>"."</li>";
                    $sum+= $data['Numero'];
                }
                $output .= "<li id='somma'>"."Somma numeri: ".$sum."</li>";
                $output .= "</ul>";
                echo $output;
            ?>
        </ul>
        <script type="text/javascript">
            function deleteList(){
                var item = document.getElementById('myLi');
                item.parentNode.removeChild(item);
                var somma = "<?php ($sum); ?>";
                document.write(somma);
            };
            
        </script>
    </body>
</html>
e questo il file json da cui estrapolo la lista: 
{
    "lista":[
        {
            "Descrizione": "Gino",
            "Numero" : 7
        },
        {
            "Descrizione": "Marco",
            "Numero" : 2
        },
        {
            "Descrizione": "Pino",
            "Numero" : 1
        },
        {
            "Descrizione": "Lino",
            "Numero" : 9
        }
    ]
}
Come potete notare ho prima realizzato uno script php che legge il file json, e lo mostra in una pagina html. Ogni elemento della lista contiene descrizione, il numero ed un bottone. Alla fine della lista devo mostrare il totale che è ottenuto come somma dei numeri (calcolato in php).
Il mio problema, che penso derivi dal fatto che con lo script php gli id degli elementi nella lista sono tutti uguali, è che quando clicco sul bottone mi viene rimosso sempre il primo elemento della lista, come posso ovviare al problema?

2 Risposte

  • M
    magicsign
    Utente Attivo
    Iscritto da
    dic, 2018
    Messaggi:
    105

    Re: Rimozione elemento da lista

    Non conosco php ma sbaglio o qui stati settando tutti gli elementi con lo stesso id :
    <li id='myLi'>
    Magari per distinguerli si potrebbe concatenare un numero preso da un counter che lo incrementi.
    bisognerebbe modificare anche la funzione deleteList in modo che prenda come parametro l'id dell'elemento da eliminare. Nel php di conseguenza : onclick='deleteList(idElemento)'
  • D
    davidededox
    Pochi posts
    Iscritto da
    lug, 2019
    Messaggi:
    5

    Re: Rimozione elemento da lista

    Buongiorno Magicsign,
    potresti associare i valori della lista in un array per poi crearli dinamicamente con un ciclo da zero a count(elementi) della variabile $i e inserendo questo valore identificativo e spostando myLi come classe qualora ne avessi bisogno, io ho avuto un problema simile ed ho risolto creando dinamicamente la lista così:

    echo '<li id=" myLi_'.$i.' " class="myLi" onclick="delete_elem('.$i.')" >'.$elemento[$i][0].'</li>';

    così facendo rendi l'id di myLi univoco così da poterlo richiamare con facilità e potendo effettuare i vari controlli, inoltre quando hai l'array caricato esistono molte funzioni per cercare l'elemento desiserato, come "in_array()", così puoi passare alla funzione JS un indice degli elementi univoco sia nel JSON sia nella lista creata dinamicamente.
    Passando la variabile alla funzione sai che il parametro che arriva alla funzione delete è l'indice della lista del file .json .

    Per qualsiasi chiarimento non esitare a chiedere,
    buona giornata

    Davide.
Devi accedere o registrarti per scrivere nel forum
2 risposte