6

Tenho em uma página um input, um botão para adicionar mais inputs e cada um tem um botão correspondente para removê-lo.

O problema é que não consigo remover os inputs adicionados através do botão. Apenas o original é removido. Segue o código aqui e funcionando no jsfiddle

HTML:

<div id="content">
<button class="add">Adicionar outro campo</button>
<br><br>
<span>
    <input type="text" name="nome" value="Original"> 
    <button class="apagar">Apagar </button>
    <br>
</span>
</div>

JS:

$(document).ready(function(){
    $('.add').click(function(){
        $('#content').append('<span> <input type="text" name="nome" value="Cópia"> <button class="apagar">Apagar </button></span> <br> ');
    });

    $('.apagar').click(function(){
        $(this).parents('span').remove();
    });
});
2
  • O problema é o escopo, coloque o apagar dentro do click do add que irá funcionar. 8/01/2016 às 11:39
  • obrigada, ajudou mto 8/01/2016 às 11:54

3 Respostas 3

6

você está adicionando o evento click a input.apagar antes de criar a mesma.

então coloque o evento a todos os input.apagar pertecentes a #content usando o método $.on.

Outro detalhe, o $.parents vai buscar todos os parentes, então se na sua arvore HTML tiver mais de um span acima do input.apagar ele tambem será excluido, então use o método $.parent, afinal você quer apenas o primeiro span.

$(document).ready(function(){
    var add = $('.add');
    var content= $('#content');
  
    add.click(function(){
        content.append('<div><span> <input type="text" name="nome" value="Cópia" /> <button class="apagar">Apagar </button></span></div>');
    });

    content.on("click", "button.apagar", function(event){
        $(event.target).parent().parent().remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <div>
    <button class="add">Adicionar outro campo</button>
  </div>
  <div>
    <span>
      <input type="text" name="nome" value="Original" /> 
      <button class="apagar">Apagar </button>
    </span>
  </div>
</div>

aqui segue uma adaptação da solução do @GabrielRodrigues

$(document).ready(function() {
  var add = $(".add");
  var content = $('#content');

  var onApagarClick = function() {
    $(this).parents('span').remove();
  };

  add.click(function() {
    var novaLinha = $('<span> <input type="text" name="nome" value="Cópia"> <button class="apagar">Apagar </button></span> <br>');    
    $('.apagar', novaLinha).click(onApagarClick);
    $('#content').append(novaLinha);        
  });

  $('.apagar').click(onApagarClick);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
  <div>
    <button class="add">Adicionar outro campo</button>
  </div>
  <div>
    <span>
      <input type="text" name="nome" value="Original" /> 
      <button class="apagar">Apagar </button>
    </span>
  </div>
</div>

0
4

O problema é o escopo, o click do apagar só esta fazendo efeito fora do click de add, e é no add que é inserido um novo campo.

$(document).ready(function() {
  $('.add').click(function() {
    $('#content').append('<span> <input type="text" name="nome" value="Cópia"> <button class="apagar">Apagar </button></span> <br> ');
  });
  
  $("#content").on('click', '.apagar', function(e) {
    $(this).parents('span').remove();
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="content">
  <button class="add">Adicionar outro campo</button>
  <br>
  <br>
  <span>
	<input type="text" name="nome" value="Original"> 
	<button class="apagar">Apagar </button>
	<br>
</span>
</div>

3
  • 1
    seguindo a sua recomendação, sempre que ele adicionar um input.apagar ele vai fazer um novo attach de um evento click a todos os input.apagar, então se ele adicionar 4 input.apagar e clicar no primeiro que ele adicionou o método será executado 4 vezes. 8/01/2016 às 11:46
  • @TobyMosque editado. 8/01/2016 às 11:58
  • atualizei a minha resposta com uma adaptação da sua resposta. 8/01/2016 às 12:02
3

Passar o evento directamente:

$(document).ready(function() {
  $('body').on('click', '.add', function() {
    $('#content').append('<span> <input type="text" name="nome" value="Cópia"> <button class="apagar">Apagar </button></span><br>  ');
  });

  $('body').on('click', '.apagar', function() {
    $(this).parents('span').remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<button class="add">Adicionar outro campo</button>
<br><br>
<span>
	<input type="text" name="nome" value="Original"> 
	<button class="apagar">Apagar </button>
	<br>
</span>
</div>

1
  • 2
    usar o .on diretamente sobre elementos como $(document), $('body') raramente é uma boa ideia... tente sempre definir um escopo menor, para resolver o problema do AP o escopo ideal seria o $('#content') 8/01/2016 às 12:06

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 .