Aggiungere ed eliminare div

[lukezz]

Salve a tutti,
dovrei aggiungere degli input contenuti all'interno di un div e cancellare sempre tramite bottone quello creato.

Questo è quello che ho fatto:

$(function () {
    var scntDiv = $('.p_scents');
    var i = $('.p_scents').size() + 1;

    $('.add').click(function() {
        $('<p><div class="col-md-11"><input type="text" class="form-control" name="nome_chef" style="font-weight: bold;" placeholder="Nome del piatto"></div><div class="col-md-1"><button type="button" class="btn btn-red btn-xs" id="remScnt">Elimina</button></div><div class="col-md-11"><input type="text" class="form-control" name="nome_chef" placeholder="Descrizione"></div><div class="clear"></div><hr></p>').appendTo(scntDiv);
        i++;
        return false;
    }); 
       
    $('#remScnt').click(function() {
        if (i > 2) {
            $(this).parent('p').remove();
            i--;
        }
        return false;
    });
});

di aggiungere aggiunge, ma di eliminare non se ne parla, non mi da neanche un errore nella console.

[chack1172]

prova così:

    $('#remScnt').click(function() {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

[lukezz]

Ho già provato

[cavicchiandrea]

$('body').on('click','#remScnt',function() {
        if (i > 2) {
            $(this).parent('p').remove();
            i--;
        }
    });

io proverei cosi, anche se dubito che possa funzionare se crei più di un elemento usando un solo id

[lukezz]

Non va, credo sia un problema di parenti, perché se provo a mettere $(this).parent('div.p_scents').remove(); mi elimina tutto ciò che c'è dentro il div con classe p_scents, ma a me serve eliminare solo una parte che è contenuta dentro <p></p>

[cavicchiandrea]

Prova cosi e verifica che la variabile (i) si incrementi correttamente

$(function () {
    var scntDiv = $('.p_scents');
    var i = $('.p_scents').size() + 1;

    $('.add').click(function() {
        $('<p class="addelement"><div class="col-md-11"><input type="text" class="form-control" name="nome_chef" style="font-weight: bold;" placeholder="Nome del piatto"></div><div class="col-md-1"><button type="button" class="btn btn-red btn-xs" id="remScnt">Elimina</button></div><div class="col-md-11"><input type="text" class="form-control" name="nome_chef" placeholder="Descrizione"></div><div class="clear"></div><hr></p>').appendTo(scntDiv);
        i++;
    }); 
       
    $('body').('click','#remScnt',function() {
        if (i > 2) {
            $(this).parent('p.addelement').remove();
            i--;
        }

    });
});

[lukezz]

Si avevo già provato ma niente

[cavicchiandrea]

Prova mettere la pagina demo online

[lukezz]

Grazie lo stesso, ho risolto mettendo un div al posto del tag <p>.