display:none;を使用している要素以外を数えたい

Question

前提・実現したいこと

https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html
上記ページの（3）を使用してソートを実装しました。
動的にリストの数が変わるので、数が増減してもレイアウト維持したいです。

リストにnth-childで装飾しているのですが、display:none;で隠した後も消す前の順番が適用されてしまいます。
display:none;で非表示にしたもの以外のliを数えて欲しいのですが・・。
下記ソースでいうと1とが非表示の時はnth-child(5n+1)を3に適用したいです。

https://teratail.com/questions/32777
こちらの質問が似ている感じだったので試してみましたがうまくいかず・・・。
なにか良い方法はないでしょうか。
よろしくお願いいたします。

（追記）下記のようなレイアウトをリストの増減があっても維持したいです。

該当のソースコード

<ul>
<li class="is-hide">1</li>
<li class="is-hide">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

ul li{
width: calc(98%/2);
float: left;
}
ul li:nth-child(5n+1){width: 60%;}
ul li:nth-child(5n+2){width: 38%;}
.is-hide{display:none;}

Comments

[Lhankor_Mhy]

CSS だけでなく JavaScript も使わないと解決できないように思いますが、それでもよろしいですか？

[komasan]

大丈夫です！ありがとうございます。よろしくお願いします。

Answer 1

下記のようなレイアウトをリストの増減があっても維持したいです。

の部分に絞って書くとこんなかんじでしょうか？
https://jsfiddle.net/liveasnotes/hbgcao2j/

参考になりそうなリンク：

• CSS Grid Layout を極める！（基礎編）| Qiita | @kura07
• CSS Grid Layout を極める！（場面別編）| Qiita | @kura07
• ライブラリを使わない素のJavaScriptでDOM操作 #要素の削除 | Qiita | @kouh
• Document.querySelectorAll() | MDN
• JavaScript で forEach を使うのは最終手段 #forEach が妥当なケース | Qiita | @diescake
• キーボード操作もできるようにチェックボックスとラジオボタンをCSSでカスタマイズする | Tips Note by TAM | yasuda

<ul>
  <li x>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
  <li x>item-4</li>
  <li>item-5</li>
  <li x>item-6</li>
  <li>item-7</li>
  <li x>item-8</li>
  <li x>item-9</li>
  <li x>item-10</li>
  <li>item-11</li>
  <li x>item-12</li>
  <li>item-13</li>
  <li x>item-14</li>
  <li x>item-15</li>
  <li x>item-16</li>
  <li>item-17</li>
  <li>item-18</li>
  <li>item-19</li>
  <li>item-20</li>
  <li>item-21</li>
  <li>item-22</li>
  <li>item-23</li>
</ul>

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: lemonchiffon;
}

ul {
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr 1fr 2fr);
  grid-template-columns: 5fr 1fr 4fr;
  list-style: none;
  background: #fff;
  width: 300px;
  margin: 2em;
  padding: 0 5px 5px 0;
}

li {
  background: pink;
  padding: 1em;
  margin: 5px 0 0 5px;
}

li:nth-child(5n-4) {
  grid-row: span 2;
  grid-column: span 2;
  height: 105px; /* marginの分を足している */
}

li:nth-child(5n-3),
li:nth-child(5n-2) {
  grid-row: span 1;
  grid-column: span 1;
  height: 50px;
}

li:nth-child(5n-1) {
  grid-row: span 2;
  grid-column: span 1;
  height: 105px; /* marginの分を足している */
}

li:nth-child(5n) {
  grid-row: span 2;
  grid-column: span 2;
  height: 105px;
}

let es = document.querySelectorAll("[x]");

es.forEach(e => {e.parentNode.removeChild(e)});

Comments

[komasan]

回答ありがとうございます！！
このような方法があるのですね！！大変勉強になりました。
参考にさせていただきます。ありがとうございます！！！

Answer 2

CSSのnth-childでは同じクラスの中で何番目という数え方はできません

Comments

[komasan]

回答ありがとうございます。
勉強不足で申し訳ないのですが、レイアウト維持をしたい場合どのような方法があるでしょうか？
ご教授頂ければ幸いです。。。