как определить идентификатор в событии клика после добавления HTML

Question

У меня есть этот код, который добавляет html в тег div с getPhotoUpdate ids ...:

var newelement = '<div id="' + data.id + '_" class="card col-md-3">
<img src="' + data.addr + '"' + ' >' +
        '<i data-deleteId="' + data.id + '" class="icon-close btn-delete"></i></div>';

$('#getPhotoUpdate').append(newelement);

и html кодом

<div id="getPhotoUpdate">
@foreach ($photos as $item)
    <div id="{{'k'.$item->id}}" class="card col-md-3">
        <img src="{{asset('public/'.$item->img_url)}}"
             width="100%" alt="Card image cap"
             height="200">
        <i data-deleteId="{{$item->id}}"
           class="icon-close btn-delete">
        </i>
    </div>
@endforeach

После добавления я хочу нажать на кнопку btn-delete и удалить изображение ؛, но я не знаю, как отправить идентификатор фотографии на событие click !!!

$('#getPhotoUpdate').on('click', '.icon-close[data-deleteId]', function () {
        let id__ = $(this).children('.icon-close').attr('data-deleteId');
        console.log(id__);          //  id__ is undefined
 });

Answer 1

Целью вашего мероприятия является тот же элемент, для которого вы ищете значение данных.

Замените:

$(this).children('.icon-close').attr('data-deleteId');

на просто:

$(this).attr('data-deleteId');

илинемного больше jQuery-иш:

$(this).data('deleteId');

Answer 2

Вы уже прослушиваете событие щелчка для .icon-close.Следовательно, ваша проблема заключается в том, что:

$(this).children('.icon-close').attr('data-deleteId');

должно быть:

$(this).attr('data-deleteId');

Демо

$('#getPhotoUpdate').on('click', '.icon-close[data-deleteId]', function() {
  let id__ = $(this).attr('data-deleteId');
  $(`#${id__}`).remove();
});


const newelement = `
  <div id="1_" class="card col-md-3">
    <img src="http://placekitten.com/100/100" alt="">
    <i data-deleteId="1_" class="icon-close btn-delete">delete</i>
  </div>
`;


$('#getPhotoUpdate').append(newelement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="getPhotoUpdate"></div>

jsFiddle