CODEWITHSUNDEEP
javascriptjqueryhtmlcsslist
user3507144
user3507144

Reputation: 13

Dynamic List Hide Empty Elements

I have this code:

<div class="listContainer">
<ul>
    <div class="hidediv">
    <li class="cacontent">
        <ul class="pcontent">
            <li class="listp">a</li>
        </ul>
    </li>
</ul>

<ul>
    <div class="hidediv">
    <li class="cacontent">
        <ul class="pcontent">
            <li class="listp">a</li>
        </ul>
    </li>
</ul>

I need to hide the div when when is empty.

The problem is that it is a dynamic list, so that all classes and div are repeated. So I've had problems with some codes, and hiding the content.

Sorry for my English

Thanks.

Update.... Sorry for the poor explanation as

<div class="listContainer"> <- Main Container Product List
<ul> 
    <div class="hidediv"><p>Title</p> <- Product List Category Title
    <li class="cacontent"> 
        <ul class="pcontent"> 
            <li class="listp"></li> <- Product List
        </ul>
    </li>
    </div>
</ul>
</div>

1º Buccle : List ALL Categories.

2º Buccle : List products in categories.

Example Bucle :

<div class="listContainer">
<ul>
    <div class="hidediv"><p><--- Category 1 ---></p>
    <li>
        <ul class="pcontent">
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 2 ---></p>
    <li>
        <ul class="pcontent">
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 3 ---></p>
    <li>
        <ul class="pcontent">
            <li class="listp"><div id="hidediv"><p><--- Product 1 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 2 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 3 ---></p>
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 4 ---></p>
    <li>
        <ul class="pcontent">
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 5 ---></p>
    <li>
        <ul class="pcontent">
            <li class="listp"><div id="hidediv"><p><--- Product 1 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 2 ---></p>
            <li class="listp"><div id="hidediv"><p><--- Product 3 ---></p>
        </ul>
    <li>
    </div>
    <div class="hidediv"><p><--- Category 6 ---></p>
    <li>
        <ul class="pcontent">
        </ul>

    <li>
    </div>
<ul>
</div>

I'm need hide list elements Empty,

Upvotes: 0

Views: 249

Answers (1)

dPatel1582
dPatel1582

Reputation: 134

I do not understand when WHAT is empty?

What portion is dynamic here?

if this part is dynamic :

<ul> <div id="hidediv"> <li class="cacontent"> <ul class="pcontent"> <li class="listp">a</li> </ul> </li> </ul>

simple way will be, you should not create this list item when you find (the thing? Don't know, you did not mention) is empty from the code you are creating these dynamic list.

As a best practice you must find a way to make your html component with unique ids, then I would suggest you should put class "any name" to each div. class name must be common for all divs inside .

suppose your divs class is "hidDiv". You should right a jQuery :

$(document).ready(function () { $('.hidDiv').each(function () { <you can find is div have its children by using $(this).children(), and apply some logic> }); });

Hope this idea will help you.

----------------------------Updated------------------------------

Your code is still not valid code, div and p are not valid component inside ul. p will mesh alignment of your list component.

How about this :

<div class="listContainer"> <ul> <li class="category"> <--- Category 1 --->
<ul class="pcontent"> </ul> </li> <li class="category"> <--- Category 2 ---> <ul class="pcontent"> </ul> </li> <li class="category"> <--- Category 3 ---> <ul class="pcontent"> <li class="listp"><--- Product 1 ---></li> <li class="listp"><--- Product 2 ---></li> <li class="listp"><--- Product 3 ---></li> </ul> </li> <li class="category"> <--- Category 4 ---> <ul class="pcontent"> </ul> </li> <li class="category"> <--- Category 5 ---> <ul class="pcontent"> <li class="listp"><--- Product 1 ---></li> <li class="listp"><--- Product 2 ---></li> <li class="listp"><--- Product 3 ---></li> </ul> </li> <li class="category"> <--- Category 6 ---> <ul class="pcontent"> </ul> </li> </ul> </div>

And add below jQuery code inside your java-script file : $(document).ready(function () { $(".listContainer").find(".category").each(function (i) { var plist = $(this).find(".pcontent").find("li"); if (plist.length <= 0) { $(this).attr("style", "display:none;"); } }); });

This will give you your desire output.

Upvotes: 1

Related Questions