javascript - How do I deal with ul > li items not arranging as expected when removing items -

javascript - How do I deal with ul > li items not arranging as expected when removing items -

i have problem getting list items display expect. here images help explain issue.

i have dynamically decide items display. command display either removing li dom using

parent.removechild(child)

or

setting display:none;

if remove right item on top row expect below

however end different

this trend continues if remove 2 items row

but rows reflow if remove items row

the items displayed in store stored in ul each item within li item. i'm using wordpress woocommerce store software there's ton of code may touch issue.

this illustration of html

<ul class="products"> <li class="post-188 product type-product status-publish has-post-thumbn…rst shipping-taxable purchasable product-type-simple instock"> <a href="https://arrc.vtc.vt.edu/mturk2/product/chewing-tobacco/"> <img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="chewing tobacco" src="https://arrc.vtc.vt.edu/mturk2/wp-content/uploads/2014/10/chewing-tobacco-150x150.jpeg"></img> <h3> chewing tobacco </h3> <span class="price"> <span class="amount"> $4.35 </span> </span> </a> <a class="button add_to_cart_button product_type_simple" data-quantity="1" data-product_sku="dip" data-product_id="188" rel="nofollow" href="/mturk2/?add-to-cart=188"> add together cart </a> </li> <li class="post-91 product type-product status-publish has-post-thumbna…l shipping-taxable purchasable product-type-variable instock"></li> <li>...

this css deals displaying items

/* 2.4.1 product gallery */ .product-gallery {position: relative;margin:0 0 30px;} .product-gallery ul.products { border-top:0; } ul.products { margin-left:0; padding-left:2px; padding-right:2px; padding-top:2px; zoom:1; } ul.products .added_to_cart { display: block; padding-top:.5em; } ul.products:before, ul.products:after { content:""; display:table; } ul.products:after { clear: both; } ul.products li { width:30.75%; float: left; list-style: none; position: relative; margin-right:3.8%; text-align: center; margin-bottom:2.618em; } ul.products li.first { clear: left; } ul.products li.last { margin-right:0; } ul.products img { width:100%; height: auto; padding:0; border:0; background: #fff; border-radius:3px; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.25); -moz-box-shadow:0 0 3px rgba(0,0,0,0.25); box-shadow:0 0 3px rgba(0,0,0,0.25); -webkit-transition: ease-in-out .2s; } ul.products a:hover img {opacity:0.8; } ul.products li h3 { font-size:1em; display: block; padding-top:0; } ul.products li a:hover h3 { color:#111; } ul.products li a:hover { text-decoration: none !important; } ul.products li .price { position: absolute; top:10px; right:-6px; background: #d23d46; padding:2px 12px 2px 8px; font-size:0.8751em; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.25); } ul.products li .price:before { content: ""; border:14px solid red; border-right-width:2px; border-color:#d23d46 #d23d46 #d23d46 transparent; position: absolute; top:0; left:-14px; } ul.products li .price:after { content: ""; border:6px solid red; border-color: #892026 transparent transparent transparent; border-left-width:0; position: absolute; right:0; bottom:-12px; } ul.products li a.button { margin:0; } .onsale { background-color: #96c42e; position: absolute; top:10px; left:-6px; padding: 2px 8px; font-size: 0.8751em; text-align: center; color:#fff; z-index: 999; text-shadow: 0 1px 0 rgba(0,0,0,0.1); } .onsale:before { content: ""; border:14px solid #96c42e; border-color:transparent transparent transparent #96c42e; position: absolute; top:0; right:-28px; } .onsale:after { content: ""; border:6px solid #67861f; border-color: #67861f transparent transparent transparent; border-right-width:0; position: absolute; left:0; bottom:-12px; } ul.products li del { color:#ccc; } ul.products li ins { text-decoration:none; }

mainly css issue.

you'll need these overwrites:

ul.products li.last { margin-right: 3% !important; } ul.products li { margin-right: 3%; width: 30%; } .last { clear: none; } ul.products li.first { clear: none; }

the problem wordpress template appending first , lastly class each row. also, width , right margins greater 100% creates wrap around.

javascript html css-float woocommerce