I´m trying delete my line with event and jquery.
I´m creating hmtl dynamically and with one icon cleaner and envet i want to delete my line. But my problem it´s that if i delete my first line, delete all lines, or if i delete my last line, delete this line.
I don´t know that i´m doing wrong.
i have this:
$(".selectItem").on('click', function() {
if ($(this).is(':checked')) {
let value = $(this).val();
$.ajax({
url: document.location.origin + '/admin/articulos/selected',
type: 'GET',
data: {
'itemId': value
},
success: function(response) {
$(".row-info").append(`
<div class="items_container ${value}">
<div class="col-md-2 item_ref">${value}</div>
<div class="col-md-6 item_description">${response[0].nombre}</div>
<div class="col-md-3"><input type="number" class="form-control add_more_items" value="1" style="width: 100%; text-align:center" /></div>
<div class="col-md-1"><i class="fas fa-trash-alt fa-2x text-danger remove_line" style="cursor:pointer;"></i></div>
</div>
`);
$(".remove_line").on('click', function() {
$("." + value).remove();
});
thanks for readme and sorry for my bad english
When you do
$(".remove_line").on('click', function() {
$("." + value).remove();
});
You're adding that event listener to all the remove buttons that are already on the page.
Instead of adding an event handler each time you add a row, use event delegation one time to create a single handler that works for all dynamically-added rows. It can use DOM navigation methods to remove the row that contains it, instead of having to code a specific class into the selector.
$(".row-info").on("click", ".remove_line", function() {
$(this).closest(".items_container").remove();
});
For more information see Event binding on dynamically created elements?