Hide div element if it is empty (ASP.NET MVC)

Question

I have ajax call like 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 some divs are empty because values from back-end are null.

I need to hide empty divs

I try this $(".list").find('div.section:empty').hide(); but it seems not works.

What I wrote wrong in code?

as carsten says, there are no section divs being appended, try $(".list").children('div:empty').hide(); — Pete
– Pete, Commented Apr 6, 2017 at 11:52
Sorry, seems I understood my mistake. Will try one solution now — Eugene
– Eugene, Commented Apr 6, 2017 at 11:53

It's a trap · Accepted Answer · 2017-04-06 12:23:49Z

1

This can be done easily using javascript Only. In this approach, you will get all the div's, check if they are empty and hide them accordingly.

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';
        }
    }
}

edited Apr 6, 2017 at 12:23

answered Apr 6, 2017 at 11:53

It's a trap

1,35317 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

madalinivascu Over a year ago

all the div from the page

Zaheer Ul Hassan Over a year ago

he only wants div inside ".list" class. Why all divs?

It's a trap Over a year ago

@madalinivascu fixed it

Eugene Over a year ago

It hides all my div in list

It's a trap Over a year ago

@Eugene Really?? it should not. we have checked for empty before hiding. This suggests that all your div's are empty when you run this function. Make sure to run it after the ajax call returns. Most probably it is getting executed before that. You can try moving it to a callback function

|

Collectives™ on Stack Overflow

Hide div element if it is empty (ASP.NET MVC)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related