jQuery检测元素为空异常：元素非空却被判定为空的问题求助

这个坑我之前踩过！你遇到的核心问题出在空元素的判断逻辑上，jQuery选择器返回的对象永远是“真值”，哪怕它没匹配到任何元素，所以你的判断条件从一开始就错了。

为什么会出现这个错误？ #

当你写if ($('.selectedId:empty'))时，不管selectedId是否为空，这个表达式返回的都是一个jQuery对象——而在JavaScript的if判断里，对象永远会被视为true，哪怕这个对象里没有任何DOM元素。所以哪怕容器里还剩一个元素，这个条件也会成立，导致错误输出empty。

正确的判断方式 #

给你几种靠谱的解决方法，按需选择：

1. 用.is(':empty')直接判断
   这是最贴合你需求的写法，它会返回布尔值，准确告诉你元素是否匹配:empty选择器：

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

2. 检查子元素数量
   如果你的场景里只有动态添加的div子元素，不需要考虑文本节点，可以直接统计子元素长度：

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

3. 处理空白文本的特殊情况
   注意:empty选择器会把元素内的空白字符（比如换行、空格）也算作内容，导致明明没有子元素却判断为非空。如果你的HTML结构里可能存在空白，可以结合文本修剪来判断：

   $(document).on('click', '.remove', function(){
       const $selected = $('.selectedId');
       const hasNoText = $.trim($selected.text()) === '';
       const hasNoChildren = $selected.children().length === 0;
       if (hasNoText && hasNoChildren) {
           console.log('empty');
       } else {
           console.log('isnt empty');
       }
   });
   

额外小提示 #

你添加元素的代码里，appendTo的目标选择器#product .selectedId div[data-name="'+name+'"]要确保页面上确实存在对应的元素，避免出现添加失败的情况，但从你的描述来看，这部分应该是正常工作的~

内容的提问来源于stack exchange，提问作者user10264314