Javascript 删除元素时，保留备用背景色逻辑

首先，我的网站是用WP作为CMS构建的，ofc是用php编写的。我有一个页面，它是由部分组成的。这些部分是自定义的文章类型，仅当其中包含文章时才会显示。这些部分被设置为函数，并具有不同的行和背景色设置。颜色应该是浅灰色和白色每隔一段，以便用户界面看起来不错

我的挑战是，如果客户删除其中一个cpt中的所有帖子，那么该部分将“按其应该的那样”消失，但随后它会以相同的颜色一个接一个地创建两个部分。不太好看。在这个项目上，我对javascript有点模糊，所以我是一个完全的初学者。对我可能在这里做什么有什么建议吗？或者我从一开始就完全走错了路吗

以下是如何在页面模板上构建节：

<?php lol_section_bg_open(); ?> 
<h2 id="countMe" class="type2" style="margin-bottom:0"><?php _e(' announcements', 'theme'); ?></h2>

<?php lol_innerSection_open(); ?>
<?php
$args = array(
    'post_type' => 'adhoc',
    'posts_per_page' => 3
);
$Query = new WP_Query( $args );
?>

<?php if ( $Query->have_posts() ) : ?>
<?php while ( $Query->have_posts() ) : $Query->the_post(); ?>
    <div class="global-margin-bottom">
        <?php get_template_part( 'parts/content', 'date' ); ?>:
        <br/>
        <span class="bold">
        <?php the_title(); ?>
        </span>
        <br/>                   
        <?php get_template_part( 'parts/content', 'readmoreButton' ); ?>                                
    </div>   
<?php endwhile; ?>      
<?php else : ?>
    <p><em><?php _e('Currently there are no announcements.', 'theme'); ?></em></p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php lol_innerSection_close(); ?>
<?php lol_section_close(); ?>
<?php

---

另一种方法是使用CSS，比如：

你的元素：第n个孩子（偶数）{background:#CCC}你的元素：第n个孩子（奇数）{background:#FFF}

是的，对于主题（配色方案），最好使用CSS解决方案，第n个孩子（偶数）和第n个孩子（奇数）没有添加任何特定于颜色的类。太棒了：）现在使用第n个孩子奇数/偶数。工作很有魅力，谢谢你@RSTAnd@Tahir shahzadt另一种方法是使用CSS，比如：

你的元素：第n个孩子（偶数）{background:#CCC}你的元素：第n个孩子（奇数）{background:#FFF}

是的，最好使用CSS解决方案和第n个孩子（偶数）和第n个孩子（奇数）作为主题（配色方案）没有添加任何特定于颜色的类。太棒了：）现在使用第n个孩子奇数/偶数。工作很有魅力，谢谢你@塔希尔·沙赫扎德的RSTAnd

function lol_section_open() {
echo '<div class="row section">';
echo '<div class="small-12 columns">';
echo '<div class="row">';
echo '<div class="small-12 large-8 large-centered columns">';
echo '<div class="row">';
echo '<div class="small-12 xxlarge-8 columns">';}

function lol_section_bg_open() {
echo '<div class="row section empLight">';
echo '<div class="small-12 columns">';
echo '<div class="row">';
echo '<div class="small-12 large-8 large-centered columns">';
echo '<div class="row">';
echo '<div class="small-12 xxlarge-8 columns">';}

var x = {};

function myFunction() {
var x = document.getElementsByTagName("section").length;
document.getElementById("content").innerHTML = x;

} 

if (x % 2 == 0)
{
//my code
}
else
{
//my code
}