Question :
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();
});
});
Answer :
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>
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>
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>