delete line html generate dynamically

Question

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

`$(".remove_line").on('click'` adds the event handler to *all* the `remove_line` buttons, not just the one you just added. So every remove button removes that line and all the lines that were added after it. — Barmar, Mar 30 '22 at 15:47
@Barmar outchh it´s really... but how i can remove this line complete, because i use $(this) remove my icon only... — scorpions78, Mar 30 '22 at 15:52

score 1 · Accepted Answer · answered Mar 30 '22 at 15:53

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?

delete line html generate dynamically

1 Answers1