Problem to remove element added with jQuery

Question

I have on a page one input, a button to add more inputs and each has a corresponding button to remove it.

The problem is I can’t remove the inputs added via button. Only the original is removed. Follow the code here and running on 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();
    });
});

Answer 1

you are adding the event click to input.apagar before creating the same.

then put the evento to all the input.apagar pertaining to #content using the method $.on.

Another detail, the $.parents will fetch all relatives, so if in your HTML tree you have more than one span above the input.apagar it will also be deleted, so use the method $.parent, After all you only want the first 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>

here is an adaptation of the @Gabrielrodrigues solution

$(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>

Answer 2

The problem is the scope, the delete click only this making effect outside the add click, and it is in the add that a new field is inserted.

$(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>

Answer 3

Pass the event directly:

$(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>