Problema con remove()

otto9due · 26 Nov 2016

Ho un piccolo problema con remove().
In pratica ho creato uno script esemplificativo che mi aiuterà poi a risolvere il problema che ho su quello originale ( per evitare di postare righe e righe inutili ).
In pratica: vorrei che cliccando su un pulsante contenuto in un div con classe es: prova sia cancellato il div stesso con tutto il suo contenuto. A tal proposito avevo costruito qualcosa del genere:

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p:first").click(function(){
        $(this).closest("div.prova").remove();
    });
});
</script>
</head>
<body>

<div class="prova" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

<p>elimina</p>
<p>This is another paragraph in the div.</p>

</div>

<div class="prova" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

<p>elimina</p>
<p>This is another paragraph in the div.</p>

</div>

<div class="prova" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

<p>elimina</p>
<p>This is another paragraph in the div.</p>

</div>


</body>
</html>

Ma ovviamente non funziona, o meglio, non so per quale motivo funziona solo su uno dei div. Qualcuno ha qualche spiegazione?

Rikk73 · 26 Nov 2016

Modifica il selettore "p:first" in "div.prova p:first-child" (se elimina è sempre il primo p del contenitore da eliminare).
Credo che questo dipenda dal fatto che solo p:first si riferisca sempre e comunque al primo p del DOM, che dopo la prima eliminazione non vedi più.

Inoltre aggiungendo div.prova sei sicuro che l'evento è abbino solo a i p che sono in un contenuto "eliminabile", e non a tutti i "primi figli"...

otto9due · 26 Nov 2016

Probabilmente non mi sono spiegato bene. Cliccando il "p" contenuto nel "div", o qualsiasi altro elemento a scelta ( es un pulsante ) il div stesso che contiene parte di un form deve scomparire..

Saluti.
G.G.

Rikk73 · 26 Nov 2016

Appunto, cliccando l'elemento che scatena l'evento, viene eliminato il contenitore padre.
Hai provato le modifiche che ti ho suggerito nel tuo esempio? A me sembra funzioni

otto9due · 26 Nov 2016

Perdonami ma avevo omesso un particolare non di poco conto..
In pratica quello che dovevo fare era sostanzialmente aggiungere campi di un form e poterli cancellare.
Quello che non avevo calcolato è che gli elementi del dom che andavo ad aggiungere non erano stati inclusi nella prima funzione ready, quindi quando andavo a cancellarli non potevano essere trovati.
Quindi ho dovuto adottare questa soluzione che funziona:

Codice:

$(document).ready(function(){
            $(document).on("click", ".selector", function(){
                $(this).closest(".selector").remove();
            });
        });

Il codice che ho scritto è un pò più articolato, ho cercato di ridurlo ai minimi termini qui, per renderlo disponibile a chi dovesse avere lo stesso problema.
Se a qualcuno servisse l'intero modello funzionante posso postarlo.

Grazie come sempre per l'aiuto.

Cerca

Cerca

Problema con remove()

otto9due

Utente Attivo

Rikk73

Utente Attivo

otto9due

Utente Attivo

Rikk73

Utente Attivo

otto9due

Utente Attivo

Discussioni simili