Ciao, si può risolvere in vari modi ma, vedendo il tuo codice, è necessario chiarire prima qualcosa:
1 - Gli id devono necessariamente essere univoci all'interno di uno stesso documento HTML.
Nel tuo ciclo vedo che stai creando un div con un id
mi pare di capire che in uscita avrai quindi una serie di div che avranno lo stesso id; se così fosse, a livello programmatico è un grosso errore. In tal caso devi "diversificare" in qualche modo quell'id, magari aggiungendo un qualche indice, o altrimenti (se ti serve solo per identificare l'elemento nel suo contesto) puoi usare una classe anziché un id.codice:<div class='canc' id='descrizione'>
2 - Controlla la validazione del codice in uscita (usando un validatore, ad esempio questo). Vedo infatti che c'è la chiusura del div (</div>) dentro il tag <a>, ma da quel che vedo il div è aperto prima dell'apertura di <a>; a meno che tu non abbia omesso di proposito delle parti di codice per riportare l'esempio sul forum, così come lo hai scritto mi pare abbastanza sbagliato.
3 - Alla tua funzione puoi passare un argomento per poter identificare l'elemento da rimuovere. Puoi fare comunque in vari modi; in linea di massima si può passare l'id dell'elemento da rimuovere (che deve essere univoco, come detto sopra) come argomento della funzione, o usare la keyword this (che fa riferimento all'elemento che chiama la funzione, nel tuo caso l'elemento <a>) e risalire, in modo relativo, all'elemento da rimuovere, ad esempio col metodo closest() di jQuery (e in tal caso sarebbe meglio usare una classe per identificare il relativo div contenitore). In genere il secondo metodo è più versatile ma va impostato a dovere in base alla situazione che si ha.
4 - Piuttosto che un elemento <a> (che nasce per essere un link) userei un pulsante (ad esempio un elemento <button> con dentro l'icona di Font Awesome, dal momento che stai usando tale toolkit) e imposterei un gestore per l'evento click. Mi pare più adatto in questa situazione.
5 - Un ultimo consiglio: nella programmazione web è buona pratica mantenere separati il più possibile le componenti html, css e javascript per ottenere un codice pulito; in altre parole è preferibile separare lo stile dai contenuti (quindi evitare CSS in linea) e allo stesso modo, separare l'azione dai contenuti (quindi evitare l'inserimento di JavaScript nei tag HTML).
Qui un semplice esempio in base a quanto indicato; chiaramente è solo un esempio dimostrativo in HTML, poi sta a te integrarlo eventualmente nel tuo PHP e impostarlo al meglio secondo le tue esigenze:
Se qualcosa non ti è chiaro, chiedi pure.codice:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script> // Qui tutto il JavaScript separato dal codice HTML $(function(){ // Applico un gestore click per i pulsanti .rimuovi $('.contenitore_ricetta .rimuovi').click(function(){ // Il this fa riferimento al pulsante stesso // con closest() seleziono il primo elemento ascendente che ha classe .contenitore_ricetta // quindi lo rimuovo $(this).closest('.contenitore_ricetta').remove(); }); }); </script> <style> /* Qui tutto il CSS separato dal codice HTML */ .contenitore_ricetta { width: 500px; background: tan; margin-bottom: 10px; overflow: auto; } .contenitore_ricetta .rimuovi { float: right; cursor: pointer; } .rimuovi > .fa-close { font-size: 16px; color: red; } </style> </head> <body> <div class='contenitore_ricetta'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <button class='rimuovi'><i class="fa fa-close"></i></button> </div> <div class='contenitore_ricetta'> Morbi venenatis nibh sit amet mi elementum semper. <button class='rimuovi'><i class="fa fa-close"></i></button> </div> <div class='contenitore_ricetta'> Quisque suscipit sem non est eleifend consectetur. <button class='rimuovi'><i class="fa fa-close"></i></button> </div> <div class='contenitore_ricetta'> Suspendisse malesuada massa lorem, id pharetra arcu iaculis a. <button class='rimuovi'><i class="fa fa-close"></i></button> </div> </body> </html>
Buon proseguimento.
Rispondi quotando