2

Estou tentando remover campos de um formulário que estão dentro de um for. O problema é que apenas o primeiro elemento do for é removido, os demais não funcionam.

Penso que talvez tenha feito alguma coisa errada na função, não tenho experiência com jQuery. Segue o código abaixo:

O HTML:

<div id="dados">    
   @for($i=0; $i<3;$i++)
      <span>    
         <input type="text" name="op1">
         <a href="#" id="remover">Remover</a>
      </span>    
   @endfor    
</div>

O JS:

$(document).ready(function(){
    $('#remover').click(function(){
       $(this).parents('span').remove();
       return false;
    });
)};
3
  • 1
    id é seletor único, se você deseja criar vários itens utilize um identificador como classe para fazer. você esta removendo apenas o primeiro por que no click voce usa this, removendo apenas o parente span do item clicado, e não todos. 7/01/2016 às 11:20
  • Mas não quero remover todos não, quero remover um só. O for irá gerar 3 elementos. Cada elemento vai ter um botão remover. Quando clicar no botão remover quero que seja removido o campo correspondente. O problema é que só o botão do primeiro campo funciona e os demais não. 7/01/2016 às 11:24
  • Funcionou como eu queria trocando o id por class! Obrigada 7/01/2016 às 11:27

3 Respostas 3

4

Seu problema é exatamente no seletor, que utiliza um identificador unico, utilize classes que irá funcionar.

Exemplo:

var div = '<span><input type="text" name="op1"><a href="#" class="remover">Remover</a></span>';

var conteudo = $("#conteudo");

conteudo.append(div);
conteudo.append(div);
conteudo.append(div);

$(".remover").click(function() {
  $(this).parent('span').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="conteudo"></div>

3

O problema é que estás a usar IDs multiplas. Dentro do ciclo for estás a usar N vezes <a href="#" id="remover">Remover</a> com a mesma ID e isso é HTML inválido.

Tens de usar classes, por exemplo:

HTML

<a href="#" class="remover">Remover</a>

jQuery

$('.remover').click(function(){

Ou usar assim, sem IDs:

$('#dados a').click(function(){

E depois podes usar o .closest('span'), em ambos os casos, uma vez que queres só remover esse bloco onde houve um click.

1

Faz assim, que deve resolver. Segue o fiddler com isso funcionando.

$(document).ready(function(){

    $('.remover').bind('click',function(){  
      $(this).parent().remove();
    });

});
3
  • Não resolveu. Se eu tiro o span de dentro do parent todo o conteúdo da página é removido. 7/01/2016 às 11:25
  • veja o fiddler que fiz para vc
    – RBoschini
    7/01/2016 às 11:33
  • Obrigada. Mas o problema foi resolvido apenas trocando id por class 7/01/2016 às 11:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .