Как вызвать событие click для div, содержащегося в ul

Question

Я пытаюсь удалить элемент из моей корзины, как только пользователь нажимает на значок удаления элемента в моем раскрывающемся списке, но, похоже, он не работает.Любой, у кого есть идея, буду признателен.Ниже мой код

$('#delcarts > li .removecart').on('click', function () {
    var pid = $(this).attr('removecartid');
    var conf = confirm("Are you sure you want to delete item? "+pid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="delcarts">
 <li class="box-li-cart">
    <div class="col-xs-3 col-md-3 box-cart-book"><img src="'.$book_image.'"/></div>
        <div class="col-xs-8 col-md-8 minicart-data">
            <p class="mc-name">'.$book_title.'</p>
            <p>'.$qty.' X '.$cursymb.' '.$book_price.'</p>
        </div>
    <div removecartid="'.$bid.'" id="removecart" class="btn-remove-prod removecart"><a>[X]<i class="fa fa-times" aria-hidden="true"></i></a></div>
</li>
</ul>

Answer 1

• Вам нужно использовать if для подтверждения, затем .closest('li'), чтобы получить ближайший li, затем использовать .remove()

• Не используйте такие атрибуты, как removecartid =, вместо них можно использовать data атрибут data-removecartid и перехватывать его по .data('removecartid') или .attr('data-removecartid') .. jQuery Data против Attr?

$(document).on('click' , '#delcarts > li .removecart' , function () {
    var pid = $(this).attr('data-removecartid');
    var conf = confirm("Are you sure you want to delete item? "+pid);
    if(conf){
      $(this).closest('li').remove();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="delcarts">
 <li class="box-li-cart">
    <div class="col-xs-3 col-md-3 box-cart-book"><img src="'.$book_image.'"/></div>
        <div class="col-xs-8 col-md-8 minicart-data">
            <p class="mc-name">Book title</p>
            <p>Qty && Book Price</p>
        </div>
    <div data-removecartid="someid" id="removecart" class="btn-remove-prod removecart"><a ><i class="fa fa-times" aria-hidden="true">Remove</i></a></div>
</li>
</ul>

Если вы динамически генерируете li s, вам понадобится Привязка к событию для динамически создаваемых элементов?

$(document).on('click' , '#delcarts > li .removecart' , function () {

---

Если вы пытаетесь использовать onclick=

function removecart(el) {  //el here
    var pid = $(el).closest('.removecart').attr('data-removecartid'); // el here
    var conf = confirm("Are you sure you want to delete item? "+pid);
    if(conf){
      $(this).closest('li').remove();
    }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="delcarts">
 <li class="box-li-cart">
    <div class="col-xs-3 col-md-3 box-cart-book"><img src="'.$book_image.'"/></div>
        <div class="col-xs-8 col-md-8 minicart-data">
            <p class="mc-name">Book title</p>
            <p>Qty && Book Price</p>
        </div>
    <div data-removecartid="SomeId_Here" id="removecart" class="btn-remove-prod removecart">
      <a>
        <i class="fa fa-times" aria-hidden="true" onclick="removecart(this)">Remove</i>
      </a>
     </div>
</li>
</ul>

^{Примечание: Используя значок onclick=removecart(this) in <i> или его родитель <a> останется тем же действием}