javascript - Hide div element if it is empty (ASP.NET MVC) -
i have ajax call this
$('#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(); } }); }); but divs empty because values back-end null.
i need hide empty divs
i try $(".list").find('div.section:empty').hide(); seems not works.
what wrote wrong in code?
this can done using javascript only. in approach, div's, check if empty , hide them accordingly.
var req = document.getelementsbyclassname('list'); for(j=0; j<req.length; j++) { var divs = req[j].innerhtml.getelementsbytagname('div');// got divs in current element for(i=0; i<divs.length; i++) { if(divs[i].innerhtml == "") { divs[i].style.display = 'none'; } } }
Comments
Post a Comment