delete line html generate dynamically-CodePudding

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 >
                        <div >${value}</div>
                            <div >${response[0].nombre}</div>
                               <div ><input type="number"  value="1" style="width: 100%; text-align:center" /></div>
                               <div ><i  style="cursor:pointer;"></i></div>
                                            </div>
                                        `);

                  $(".remove_line").on('click', function() {
                    $("."   value).remove();
                  });

thanks for readme and sorry for my bad english

CodePudding user response：

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?