jquery - parent element not being removed

Question

The code:

    $('.del').click(function(e){
        $(this).parents('.order-item').remove();
        if($('.order-item').length == 0){
            $('#order-items').append(Data.order_item_clone)
        }
    })

What am I doing wrong? As you can see, I am trying to remove the parent element '.order-item' based on the '.del' element clicked. Nothing is happening. This is what the html looks like:

<div class="col-md-3" id="order-items">
    <div class="order-item">
        <div class="col-md-1 nhp" id="side">
        
        </div>
        <div class="col-md-7 nhp">
            <div class="col-md-3 obox-num obox">

            </div>
            <div class="col-md-9 obox-purity obox">

            </div>
            <div class="col-md-4 obox-info obox-price obox">

            </div>
            <div class="col-md-4 obox-info obox-weight obox">

            </div>
            <div class="col-md-4 obox-info obox-total-price obox">

            </div>
        </div>
        <div class="col-md-2 nhp">
            <button class="del" style="width:100%; height:77px"> Del </button>
        </div>
        <div class="col-md-2 nhp">
            <button class="print" style="width:100%; height:77px"> Print </button>
        </div>
    </div>
</div>

For the most part, this html is generated dynamically with javascript/jquery. Can anyone help? Thanks in advance

Edit: When I do $('.del').eq(0).parents('.order-item').remove() things work find, so there is something wrong with $(this)

Code shown [works fine here](https://jsfiddle.net/e2wuy5kv/). Are these generated after you run that code? If so you need to delegate the event listener — charlietfl, May 22 '21 at 00:25

score 0 · Answer 1 · answered May 22 '21 at 01:36

  $(document).on('click','.del', function(e){
        $(this).parents('.order-item').remove();
        if($('.order-item').length == 0){
           alert("append now");
           // $('#order-items').append(Data.order_item_clone)
        }
    })

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

<div class="col-md-3" id="order-items">
    <div class="order-item">
        <div class="col-md-1 nhp" id="side">
        
        </div>
        <div class="col-md-7 nhp">
            <div class="col-md-3 obox-num obox">
              alpha
            </div>
            <div class="col-md-9 obox-purity obox">
            beta
            </div>
            <div class="col-md-4 obox-info obox-price obox">
gamma
            </div>
            <div class="col-md-4 obox-info obox-weight obox">
yellow
            </div>
            <div class="col-md-4 obox-info obox-total-price obox">
blue
            </div>
        </div>
        <div class="col-md-2 nhp">
            <button class="del" style="width:100%; height:77px"> Del </button>
        </div>
        <div class="col-md-2 nhp">
            <button class="print" style="width:100%; height:77px"> Print </button>
        </div>
    </div>
</div>

Since you mentioned, the html are loaded dynamically, you need to bind the click to document and capture the element.

$(document).on('click','.del', function(e){

jquery - parent element not being removed

1 Answers1