Sử dụng câu lệnh if để kiểm tra xem một div có trống không

Tôi đang cố gắng xóa một div cụ thể nếu một div riêng trống. Đây là những gì tôi đang sử dụng:

$(document).ready(function () {
    if ('#leftmenu:empty') {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({ 'right': '0', 'position': 'absolute' });
        $('#PageContent').css({ 'top': '30px', 'position': 'relative' });
    }
});

Tôi nghĩ rằng điều này đã gần xong nhưng tôi không thể tìm ra cách viết mã để kiểm tra #leftmenu trống. Bất kỳ trợ giúp được đánh giá cao!

Bạn có thể sử dụng .is().

if( $('#leftmenu').is(':empty') ) {
    // ...

Hoặc bạn có thể chỉ cần kiểm tra thuộc lengthtính để xem nếu một trong những được tìm thấy.

if( $('#leftmenu:empty').length ) {
    // ...

Hãy nhớ rằng trống có nghĩa là không có khoảng trắng. Nếu có khả năng sẽ có khoảng trắng, thì bạn có thể sử dụng $.trim()và kiểm tra độ dài của nội dung.

if( !$.trim( $('#leftmenu').html() ).length ) {
    // ...

Nó phụ thuộc vào những gì bạn có nghĩa là trống.

Để kiểm tra xem không có văn bản nào (điều này cho phép các phần tử con tự trống):

if ($('#leftmenu').text() == '')

Để kiểm tra xem không có phần tử con hoặc văn bản nào:

if ($('#leftmenu').contents().length == 0)

Hoặc là,

if ($('#leftmenu').html() == '')

Nếu bạn muốn có một bản demo nhanh chóng về cách bạn kiểm tra các div trống, tôi khuyên bạn nên thử liên kết này:

http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/

Dưới đây bạn có một số ví dụ ngắn:

Sử dụng CSS

Nếu div của bạn trống mà không có bất kỳ thứ gì thậm chí không có khoảng trắng, bạn có thể sử dụng CSS:

.someDiv:empty {
    display: none;
}

Thật không may, không có bộ chọn CSS nào chọn phần tử anh chị em trước đó. Chỉ dành cho phần tử anh chị em tiếp theo:x ~ y

.someDiv:empty ~ .anotherDiv {
    display: none;
}

Sử dụng jQuery

Kiểm tra độ dài văn bản của phần tử bằng hàm text ()

if ( $('#leftmenu').text().length == 0 ) {
    // length of text is 0
}

Kiểm tra xem phần tử có bất kỳ thẻ con nào bên trong không

if ( $('#leftmenu').children().length == 0 ) {
    // div has no other tags inside it
}

Kiểm tra các phần tử trống nếu chúng có khoảng trắng

if ( $.trim( $('.someDiv').text() ).length == 0 ) {
    // white-space trimmed, div is empty
}

Bạn có thể mở rộng chức năng jQuery như sau:

Mở rộng :

(function($){
    jQuery.fn.checkEmpty = function() {
       return !$.trim(this.html()).length;
    };
}(jQuery));

Sử dụng :

<div id="selector"></div>

if($("#selector").checkEmpty()){
     console.log("Empty");
}else{
     console.log("Not Empty");
}

Thử cái này:

$(document).ready(function() {
    if ($('#leftmenu').html() === "") {
        $('#menuTitleWrapper').remove();
        $('#middlemenu').css({'right' : '0', 'position' : 'absolute'});
        $('#PageContent').css({'top' : '30px', 'position' : 'relative'});
    }
});

Nó không phải là đẹp nhất, nhưng nó sẽ hoạt động. Nó kiểm tra xem innerHTML (nội dung của #leftmenu) có phải là một chuỗi rỗng hay không (nghĩa là không có gì bên trong nó).

Trong trường hợp của tôi, tôi có nhiều phần tử cần ẩn trên document.ready. Đây là chức năng (bộ lọc) làm việc cho tôi cho đến nay:

$('[name="_invisibleIfEmpty"]').filter(function () {
    return $.trim($(this).html()).length == 0;
}).hide();

hoặc .remove () thay vì .hide (), bất cứ điều gì bạn muốn.

FYI: Đặc biệt, đây là giải pháp tôi đang sử dụng để ẩn các ô bảng trống gây phiền nhiễu trong SharePoint (ngoài điều kiện "|| $ (this) .children (" menu "). Length".

if (typeof($('#container .prateleira')[0]) === 'undefined') {
    $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none');
}

Tôi đã gặp phải điều này hôm nay và các câu trả lời được chấp nhận không phù hợp với tôi. Đây là cách tôi đã làm điều đó.

if( $('#div-id *').length === 0 ) {
    // your code here...
}

Giải pháp của tôi kiểm tra xem có bất kỳ phần tử nào bên trong div hay không để nó vẫn đánh dấu div trống nếu chỉ có văn bản bên trong nó.

bạn cũng có thể sử dụng cái này:

    if (! $('#leftmenu').children().length > 0 ) {
         // do something : e.x : remove a specific div
    }

Tôi nghĩ nó sẽ làm việc cho bạn!

if($('#leftmenu').val() == "") {
   // statement
}