ausblenden div-Element, wenn es leer ist (ASP.NET MVC)

Question

Ich habe Ajax-Aufruf wie diese

$('#display').click(function() { 
     var vacancyId = $("#vacancy").val(); 
     var model = { 
      vacancyId: vacancyId 
    }; 

     $.ajax({ 
    url: '@Url.Action("QuestionBlocks", "Questions")', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(model), 
    type: 'POST', 
    dataType: 'json', 
    processData: false, 
    success: function (data) { 
     var question1 = data[0] 

     $(".list").append('<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color:#ffcf00;border-radius: 5px;margin: 10px auto 0;;">' + question1.Question1 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question2 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question3 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question4 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question5 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question6 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question7 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question8 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question9 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question10 + '</div>'); 
     $(".list").find('div.section:empty').hide(); 
     } 
    }); 
}); 

Aber einige divs sind leer, weil Werte von den Back-End-Null sind.

brauche ich leer divs

ich diese $(".list").find('div.section:empty').hide(); versuchen sich zu verstecken, aber es scheint nicht funktioniert.

Was habe ich im Code falsch geschrieben?

Answer 1

Dies kann einfach mit nur Javascript durchgeführt werden. Bei diesem Ansatz erhalten Sie alle Divs, prüfen, ob sie leer sind und verstecken sie entsprechend.

var req = document.getElementsByClassName('list'); 
for(j=0; j<req.length; j++) 
{ 
    var divs = req[j].innerHTML.getElementsByTagName('div');// got all the divs in the current element 

    for(i=0; i<divs.length; i++) 
    { 
     if(divs[i].innerHTML == "") 
     { 
     divs[i].style.display = 'none'; 
     } 
    } 
}