How to count elements on deletion so that I don't end up with empty ()?

Question

I have the following code snippet:

<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> 

Every time I click on the small .delete icon, I have to delete the current value, and I was able to achieve this 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 there are problems in the above code: if I delete all the elements, we end up with the following () empty string, and I cannot have it:

• How to count SPAN inside parenthesis () and raise a warning if I click on the last?

Note. The correct behavior will display a confirmation dialog to the user and if the user clicks "OK" and agrees to delete the last item, all state should be deleted. The value, if I click on the last item, should be deleted> the entire parent li .

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

Answer 1

I updated your jsfiddle example, please check it out

 $(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/

Answer 2

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

_{Also, I do not see the need to refer to 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

Answer 3

You can easily calculate the gaps with something like:

  $('#selected_conditions .condition_item').length 

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

Make the selector more or less specific as needed.

Answer 4

It:

 $(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'); } }); }); 

Answer 5

Refresh the function body to find the count of the children:

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

Answer 6

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(); } } }); });