Spiegazione Remove() con id

[alemix]

Mi ci sto sbattendo la testa da un giorno e non riesco a venirne a capo.

Ho una struttura fatta più o meno cosi

<div id="contenitore1">
    <div id='primo1'>
    </div>
    <div id='secondo1'>
    </div>
    <div id='pulsante1'>
    </div>
</div>
<a>Aggiungi contenitore</a>

cliccando su <a> aggiunge un contenitore+1 con i vari div interni.

Sono riuscito a farlo e funziona. Ora volevo fare in modo che se clicco sul pulsante mi venisse cancellato l'intero contenitore, ho quindi pensato di utilizzare una variabile che viene incrementata (n) ogni volta che aggiungo, e ogni volta che cancello invece viene decrementata (voglio fare in modo che venga visualizzato solo l'ultimo pulsante e non tutti).
Sto ancora lavorando al codice, ma ho fatto tutta questa spiegazione perchè non capisco una cosa.
se io faccio

$("#pulsante"+n).click(function(){
    ("#contenitore"+n).remove();
    n--;
});

Non funziona, come se #pulsante+n non esistesse.
Ho pensato di aver scritto qualche cosa male, però il codice

$("#contenitore"+num).mouseover(function(){
    $("> .pulsante",this).show()
});

funziona benissimo.
Ho cercato vari metodi, per risolvere, come per esempio il fatto che pulsante sia figlio di contenitore, e come selettore ho provato "#contenitore > #pulsante" ma anche qua niente.
L'unico modo in cui sono riuscito è mettere al posto di "#pulsante"+n la classe, e difatti mettendo un alert mi da la conferma del click. però il remove continua a non funzionare.
Secondo voi dove sbaglio?

[cavicchiandrea]

$(document).ready(function(){
$("body").on('click',"#pulsante"+n, function(){
$("body").remove("#contenitore"+n);
n--;
});
});

[alemix]

No niente non mi funziona,

Però ti chiedo delle delucidazione. la parte di codice, che ho creato, non ha un il $(document).ready(), perchè se ho sempre capito bene, questo serve ad indicare, esegui tutto quando la pagina è stata caricata no?

seconda cosa, nella tua correzione mi fai usare on() al posto di click() cosa cambia?
e il selettore body perchè? se ho sempre capito bene quello che ho studiato di Js-Jquery in questo caso è il selettore del metodo on() o click() o remove() quindi se io invece di segnalargli tutto il tag body, gli segnalo solo la parte che a me serve dovrebbe essere la stessa cosa no?
e sopratutto, nel remove() vedendo la documentazione dice che dentro le parentesi posso mettere un selettore per essere più preciso, in caso voglia eliminare solamente una classe, contenuta nel selettore precedente, in questo caso eliminerebbe tutti i #contenitore+n in body. ma siccome body è tutta la pagina, non dovrebbe essere un altro modo per scrivere quello che ho fatto io?
Giusto per essere sicuro di non portarmi idee strane dietro

[Vindav]

secondo me stai sbagliando approcio, ogni volta che creerai un nuovo contenitore(e quindi un nuovo pulsante) dovrai definire una funzione di click, mentre il tutto si può tranquillamente gestire con una singola funzione.

<div>container<div>primo</div><div>secondo</div><a href='#' class='pulsante'>pulsante</a></div>

$("body").on("click", ".pulsante", function(){
  $(this).parent().remove();
});

Questa funzione intercetta il click su qualunque pulsante aggiungerai, ed elimina il container del pulsante cliccato.

[alemix]

Si effettivamente come idea è più furba! più che altro non conoscevo parent().

A questo punto mi manca capire il problema che non me lo fa funzionare... non funziona proprio il click! e non capisco il perchè, eppure sto controllando la sintassi ma mi pare giusta.
Ho messo un alert tra function(){ e il $(this) ma non mi appare, eppure per essere sicuro ho lavorato tutto di copia e incolla

[Vindav]

ti segnala qualcosa la console del browser? ci sarà qualche altro errore nella pagina

intanto ti rispondo alle altre domande:

$(document).ready(), perchè se ho sempre capito bene, questo serve ad indicare, esegui tutto quando la pagina è stata caricata no?

si, $(function() è la forma contratta

nella tua correzione mi fai usare on() al posto di click() cosa cambia?

se non usi on (live/delegate nelle precedenti versioni di jquery) non verranno intercettati ii click sui nuovi elementi creati con js/jquery ma solo su quelli già esistenti

e il selettore body perchè? se ho sempre capito bene quello che ho studiato di Js-Jquery in questo caso è il selettore del metodo on() o click() o remove() quindi se io invece di segnalargli tutto il tag body, gli segnalo solo la parte che a me serve dovrebbe essere la stessa cosa no?

Questa domanda non è chiara, cmq non sei obbligato a usare il selettore body, basta che associ on a un tag che contenga il tuo codice html, esempio:

<div id="contenitoreGlobale">
<div>container<div>primo</div><div>secondo</div><a href='#' class='pulsante'>pulsante</a></div>
</div>

Con un codice html del genere potresti modificare l'istruzione cosi:
$("#contenitoreGlobale").on("click", ".pulsante", function

Dell'ultima domanda non ci ho capito nulla

[alemix]

ok provo a rispiegarmi

per le prime hai risposto completamente ai miei dubbi.

sulla terza mi viene un dubbio.
Nel tuo esempio, body o contentitoreGlobale sono padri del div container. Nel mio caso invece, il discorso è più lungo, nel senso che body è un antenato distante del container che io prendo ad esempio.
Ora come dici te, non è necessario usare body, però penso che me lo avete consigliato poichè body deve essere presente nella pagina (anche in caso io non lo avessi scritto nel file il browser dovrebbe crearlo per visualizzare la pagina) quindi scorrendo il DOM della pagina, partendo da body dovrebbe trovarmi la classe pulsante e quindi eseguire la funzione.

Per la quarta domanda è semplicissima. Ho copiato il tuo codice, e non mi funzionava. ho provato a fare modifiche varie per non stare sempre qua a chiedere, e risolvermi il problema da solo.
Siccome vedevo che non funzionava ho modificato il tuo codice così

$("body").on("click",".pulsante",function(){
  alert("guardo se si attiva");
  $(this).parent().remove();

Ma non mi da nulla, quindi è proprio come se non trovasse la classe .pulsante, e non quindi non c'e errore nella riga $(this).parent().remove;

Nella console errori non mi da nulla effettivamente

[Vindav]

Nel tuo esempio, body o contentitoreGlobale sono padri del div container. Nel mio caso invece, il discorso è più lungo, nel senso che body è un antenato distante del container che io prendo ad esempio.
Ora come dici te, non è necessario usare body, però penso che me lo avete consigliato poichè body deve essere presente nella pagina (anche in caso io non lo avessi scritto nel file il browser dovrebbe crearlo per visualizzare la pagina) quindi scorrendo il DOM della pagina, partendo da body dovrebbe trovarmi la classe pulsante e quindi eseguire la funzione.

Esattamente, basta che i vari div siano all'interno di questo tag, che sia il padre o il bisnonno poco importa. Volendo puoi anche usare l'intero documento: $(document).on("click" ecc...

Ma non mi da nulla, quindi è proprio come se non trovasse la classe .pulsante, e non quindi non c'e errore nella riga $(this).parent().remove;

Domanda stupida, quando crei i vari div e bottoni ci aggiungi la classe pulsante?

[alemix]

sisi... anche perchè li uso in altre function... boh adesso me lo studio per bene

[alemix]

Ok sto praticamente impazzendo a capire dove sta il problema...
a questo punto vi spiego bene tutto il codice perchè devo farvi anche capire, perchè deve esserci qualche cosa di sbagliato

il mio codice è questo

num = 1;
function add_autor () {
    var code =  "<div id='autor_list"+(num+1)+"' class='autor_list'>"+
            "<div class='formuser' id='formuserstoria"+(num+1)+"' style='float:left;'><b>Storia"+(num+1)+":</b>              <select name='addstoria"+(num+1)+"'>"+
            "<option value='0' selected='selected'>Vuoto</option>"+
            "</select></div>"+
                    "<div class='formuser' id='formuserdisegno"+(num+1)+"' style='float:left;'><b>Disegni"+(num+1)+":</b>              <select name='adddisegni"+(num+1)+"'>"+
            "<option value='0' selected='selected'>Vuoto</option>"+
                    "</select></div>"+
            "<a href='#' class='drop_autor_list'>X</a>"+
            "</div>";
    $("#autor_list"+num).after(code);
    num++; //aumento num per differenziare il testo
    $("body").on("click",".drop_autor_list",function(){
    $(this).parent().remove();
    });
    $("#autor_list"+num).mouseover(function(){
    $("> .drop_autor_list",this).show(250);
    });
    $("#autor_list"+num).mouseleave(function(){
    $("> .drop_autor_list",this).hide(250);
    });    
}

Ora la cosa che non capisco è questa. l'errore deve essere in questa parte di codice

$("body").on("click",".drop_autor_list",function(){
    $(this).parent().remove();
});

Perchè se c'è mi blocca il caricamento del blocco sotto quindi show e hide non funzionano, se non c'è invece vanno benissimo. Oltretutto per fare una prova