Jquery не может определить, когда элемент пуст

Question

Я сталкиваюсь с небольшой проблемой, когда мой скрипт говорит мне, что элемент пуст, но в консоли я вижу, что элемент не пуст

1-й я заполняюсь динамическими элементами

$(document).on('click', '.add-color', function(e){
var name = $(this).closest('.row').find('.details').data('name');

    addHtml = '<div>';
    addHtml += '<input type="checkbox" checked name="" value="'+ name +'">';
    addHtml += '<span>'+ name +'</span>';
    addHtml += '<button type="button" class="remove"><i class="fa fa-times"></i></button>';
    addHtml += '</div>';

$(addHtml).appendTo('#product .selectedId div[data-name="'+name+'"]');
}

При удалениисобытие кнопки

$(document).on('click', '.remove', function(){
if ($('.selectedId:empty')) {
                console.log('empty');
            }else {
                console.log('isnt empty');
            }

если я добавляю 2 элемента в элемент selectedId и удаляю один из них, я получаю в консоли «пусто», но в инспекторе я вижу, что есть еще один элемент

Answer 1

if ($('.selectedId:empty')) всегда будет возвращать true, потому что: empty - это селектор, а возвращаемое - массивоподобная структура jQuery, которая содержит элементы, соответствующие вашему селектору.При преобразовании этого значения в логическое значение это всегда верно.

Возможно, вы хотите if ($('.selectedId:empty').length === 0)

Пример:

$(document).on('click','#btnAdd', function(){
  $('#product').append('<p>something</p>');
});
$(document).on('click','#btnRemove',function(){
  if($('#product:empty').length > 0)
    alert('empty!')
  else
  {
    $('#product > p:first').remove();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='product'></div>
<button id='btnAdd'>Add</button>
<button id='btnRemove'>Remove</button>

Что касается пустых, это css's: empty, но для ЭТИХ тестов они имеют одинаковый результат:

$(function(){
  $('td:empty').addClass('empty');
});

td { outline: 1px solid red;}
td::after { content:'jquery not emtpy';background-color:orange; }
td:empty::before {
  content: 'css empty';
  background-color:red;
}
td:not(:empty)::before {
  content: 'css not empty';
  background-color:red;
}
td.empty::after {
  content:'jquery empty';
  background-color:orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span></span></td>
    <td><div></div></td>
  </tr>
  <tr>
    <td></td><td> </td>
  </tr>
  <tr>
    <td>
    </td>
    <td></td>
  </tr>
</table>