Incluir e remover inputs Jquery

[tonzinhu]

Boa tarde pessoal,

estou precisando de ajuda para resolver um problema em jquery. Como estou iniciando não sei onde estou errando.

Fiz esse código para adicionar e deletar inputs.

////ADICIONAR PRODUTOS DA GRADE
$('#addGrade').click(function(){
   $('#produtosGrade').append('<p id="prodGrade"><input type="text" name="grade[]" placeholder="Digite a cor">\n\
    <a id="removeGrade" href="#grade"><i class="icon-remove"></i> remover</a></p>');
    removeGrade();
    
});

//REMOVE PRODUTOS DA GRADE
function removeGrade(){    
    $('#removeGrade').unbind('click');
    
    $('#removeGrade').on('click', function(){
    if($('p#prodGrade').length){
        $(this).parent('p').remove();
    }
    });
}

Está adicionando tranquilo, sem problemas, mas na hora de deletar ele só deleta o primeiro input, os demais não deleta.

Se puderem ajudar onde estou errando eu agradeço.

Obrigado.

[DansVC]

Boa tarde pessoal,

estou precisando de ajuda para resolver um problema em jquery. Como estou iniciando não sei onde estou errando.

Fiz esse código para adicionar e deletar inputs.

////ADICIONAR PRODUTOS DA GRADE
$('#addGrade').click(function(){
$('#produtosGrade').append('<p id="prodGrade"><input type="text" name="grade[]" placeholder="Digite a cor">\n\
<a id="removeGrade" href="#grade"><i class="icon-remove"></i> remover</a></p>');
removeGrade();

});

//REMOVE PRODUTOS DA GRADE
function removeGrade(){
$('#removeGrade').unbind('click');

$('#removeGrade').on('click', function(){
if($('p#prodGrade').length){
$(this).parent('p').remove();
}
});
}

Está adicionando tranquilo, sem problemas, mas na hora de deletar ele só deleta o primeiro input, os demais não deleta.

Se puderem ajudar onde estou errando eu agradeço.

Obrigado.

O erro é que estás a usar id para selecionar o input, o id selecciona apenas o 1º elemento com esse id.

Para eliminar vários elementos tens de usar class em vez do id.

Espero ter ajudado.

$('#addGrade').click(function(){
$('#produtosGrade').append('<p class="prodGrade"><input type="text" name="grade[]" placeholder="Digite a cor">\n\
<a id="removeGrade" href="#grade"><i class="icon-remove"></i> remover</a></p>');
removeGrade();

});

//REMOVE PRODUTOS DA GRADE
function removeGrade(){
$('#removeGrade').unbind('click');

$('#removeGrade').on('click', function(){
if($('p.prodGrade').length){
$(this).parent('p').remove();
}
});
}