Problem to remove element added with jQuery

Navigation
6

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

The problem is that I can not remove the inputs added through the 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();
    });
});
    
asked by anonymous 08.01.2016 / 12:24

3 answers

6

You are adding the event click to input.apagar before creating it.

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

Another detail, $.parents will fetch all kin, so if your HTML tree has more than a span above input.apagar it will also be excluded, so use the $.parent method, after all you just 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><divid="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's 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><divid="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>
    
08.01.2016 / 12:41
4

The problem is the scope, the delete click is only taking 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><divid="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>
    
08.01.2016 / 12:41
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><divid="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>
    
08.01.2016 / 12:44
Get AUTO_INCREMENT value from a table Is it possible to access the same argument twice in sprintf?