Xóa hoặc ẩn một div nếu nó trống rỗng

Question

Tôi biết điều này phải đơn giản nhưng không thể hiểu được. Đây là mã.

<div class="cols lmenu_item1" id="leftMenuWrapper"> 
<div id="leftmenu"></div> 
</div> 

Tôi chỉ cần xóa "leftMenuWrapper" nếu "leftmenu" rỗng. Đây là những gì tôi đã sử dụng.

$('#leftmenu').empty().remove('#leftMenuWrapper'); 

Xin lỗi nếu đây là câu hỏi đơn giản. Có một thứ hai!

Cảm ơn!

Answer 1

Bạn có thể làm điều đó như thế này:

$('#leftmenu:empty').parent().remove(); 

này chỉ chọn #leftmenunếu nó :empty, và sau đó chỉ lấy các .parent() của rằng để .remove(). Nếu nó không có sản phẩm nào, thì bộ chọn đầu tiên sẽ không tìm thấy bất kỳ thứ gì hoặc bất kỳ bậc cha mẹ nào để xóa.

Answer 2

if(!$('#leftmenu').html()){ $('#leftmenu').parent().remove(); } 

Answer 3

Nếu bạn muốn loại bỏ nếu nó trông trống:

if ($.trim($('#leftmenu').text()) == "") 
    $('#leftMenuWrapper').remove(); 

jsFiddle example

Trên đây chỉ mất nội dung văn bản của #leftmenu và cắt bỏ các khoảng trắng trước khi kiểm tra nếu mọi thứ ở đó.

Ưu điểm lớn của các bên trên qua $(#leftmenu:empty) là loại bỏ trên trong các trường hợp sau đây :empty sẽ không:

    // The above code works in these cases where ":empty" does not: 

<div id="leftmenu">  </div>        // <== white space 
<div id="leftmenu"><p></p></div>       // <== empty elements 

.trim()
.text()
.remove()

---

Lưu ý rằng sau đây là hiệu quả hơn (nhưng ít có thể đọc được IMO):

var $elie = ('#leftmenu'); 
if ($.trim($elie.text()) == "") 
    $elie.parent().remove();