CODEWITHSUNDEEP
javascriptjquery
ReynierPM
ReynierPM

Reputation: 18680

How to count the elements on deletion so I not end up with an empty ()?

I have the following piece of code:

<ul class="ul" id="selected_conditions">
  <li data-field="asset_locations_name" data-condition="in">
    <i class="fa fa-minus-circle delete_condition" aria-hidden="true" title="Click to remove this condition from the list"></i> WHERE asset_locations_name IN(
    <span class="condition_item" data-id="1213381233">
    <i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1213381233
    </span>,
    <span class="condition_item" data-id="1212371897">
    <i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1212371897
    </span> )
  </li>
</ul>

Each time I click on the little icon .delete I should remove the current value and I was able to achieve that with the following code:

$(function() {
  $('#selected_conditions').on('click', '.delete', function(ev) {
    var item_id = $(this).parent().data('id');
    $('.condition_item[data-id="'+ item_id +'"]').remove();
  });
});

But the code above has a problems: if I remove all the items I will end up with the following () empty string and I can't have it so:

Note: The right behavior would be show a confirm dialog to the user and if the user click on OK and agree to remove the last item then the whole condition should be removed. Meaning if I click on the last element the > whole parent li should be removed.

Any help? I have leave you a Fiddle to play with. This is a WIP so if you have a suggestion or better solution feel free to add it to your answer.

Upvotes: 5

Views: 264

Answers (6)

Blazemonger
Blazemonger

Reputation: 92983

You can easily count the spans with something like:

 $('#selected_conditions .condition_item').length

http://jsfiddle.net/8184ok2e/5

Make the selector more or less specific as needed.

Upvotes: 2

br3t
br3t

Reputation: 1658

I've upgrading your jsfiddle example, please check it 

$(function() {
    $('#selected_conditions').on('click', '.delete', function(ev) {
        var item = $(this).closest(".condition_item");
        var condition = $(this).closest(".condition");
        var items = condition.find(".condition_item");
        if(items.size() > 1) {
            item.remove();
        } else {
            if(confirm("Removing last item will remove whole condition. Continue?")) {
                condition.remove();
            }
        }
    });
});

https://jsfiddle.net/br3t/8184ok2e/8/

Upvotes: 6

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48417

Here is your solution:jsfiddle

$(function() {
   $('#selected_conditions').on('click', '.delete', function(ev) {
      if($('.condition_item').length > 1) {
        var item_id = $(this).parent().data('id');
        $('.condition_item[data-id="'+ item_id +'"]').remove();
      } else {
        if(confirm("Are you sure to delete ? ")){
          var item_id = $(this).parent().data('id');
          $('.condition_item[data-id="'+ item_id +'"]').remove();
        }
      }
  });
});

Upvotes: 1

AJ X.
AJ X.

Reputation: 2770

Update your function body to find count the child elements:

var items = $(this).parent().parent().find('.delete');
if (items.length > 1) {
    var item_id = $(this).parent().remove();
}

Upvotes: 1

DaniP
DaniP

Reputation: 38262

You can check if there is more siblings elements like this:

Also I don't see any need to refer the data of the parent

$('#selected_conditions').on('click', '.delete', function(ev) {
    var toRemove = $(this).parent();
    if (toRemove.siblings('.condition_item').length){
        toRemove.remove();
    } else {
        //Your code for confirm here
        alert('Sure?')
    }
});

Jsfiddle Demo

Upvotes: 3

Eduardo Mart&#237;nez
Eduardo Mart&#237;nez

Reputation: 360

This:

$(function() {
  $('#selected_conditions').on('click', '.delete', function(ev) {
    if($('.condition_item').length > 1) {
      var item_id = $(this).parent().data('id');
      $('.condition_item[data-id="'+ item_id +'"]').remove();
    } else {
      alert('This is the last');
    }
  });
});

Upvotes: 1

Related Questions