質問編集履歴

2

「発生している問題・エラーメッセージ」の下に、表示要素がない場合の状態をキャプチャで追加しました。

2022/06/23 03:49

投稿

na818
na818

score1

test CHANGED
File without changes
test CHANGED
@@ -15,131 +15,12 @@
15
15
  子要素がすべて、display:noneになったら(=display:inlineがなければ)、
16
16
  不明なidが親要素に付与されていて、まだ、親要素が残っています。
17
17
 
18
+ >表示要素がない場合の状態(キャプチャ)
19
+ ※一番左側が子要素が非表示で、親要素のみが残ってしまっている状態です。
18
- > https://teratail.com/questions/40956 (以下、参照したコード)
20
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-23/bab23597-7e61-4909-9552-1266cb765596.png)
21
+
22
+ 上記キャプチャの一番左側に、以下のスタイルが残ってしまいます。
19
- ```
23
+ ```
20
- $(".about_sale_main").each(function(index) {
21
- if($("section:not([class*='hidden-'])", this).length == 0){
22
- // hidden-を含まないsectionが0個、つまり全てhidden-を含んでいるので見えていない
23
- $(this).addClass("hidden-not-display");
24
- }
25
- else {
26
- $(this).removeClass("hidden-not-display");
27
- }
28
- });
29
- ```
30
- ### 該当のソースコード
31
-
32
- > うまくいっていないHTMLの箇所(不明なIDが付いてしまった「id="sizzle1655950385117"」)
33
- ```
34
- <li class="keyword_item" id="sizzle1655950385117">
35
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00" style="display: none;">
36
- <a href="#">#ハッシュタグ</a>
37
- </span>
38
- </li>
39
- ```
40
-
41
- > 実際に自分で改変してみたJavaScript
42
- ```
43
- //https://teratail.com/questions/40956
44
- $(".keyword_item").each(function(index) {
45
- if($("span([style*='inline'])", this).length == 0){
46
- // spanタグにdisplay:inlineが1つもなければ
47
- $(this).addClass("hidden-display");
48
- }
49
- else {
50
- $(this).removeClass("hidden-display");
51
- }
52
- });
53
- ```
54
-
55
- > 実際のHTML
56
- ```
57
- <!-- .keyword_list -->
58
- <ul class="keyword_list mt10 mb20">
59
- <!-- タイマー設定 1 -->
60
- <li class="keyword_item"> **親要素**
61
-            **子要素**
62
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00">
63
- <a href="#">#ハッシュタグ</a>
64
- </span>
65
-
66
- </li>
67
-
68
- <!-- タイマー設定 2 -->
69
- <li class="keyword_item"> **親要素**
70
-            **子要素**
71
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
72
- <a href="#">#ハッシュタグ</a>
73
- </span>
74
-            **子要素**
75
- <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
76
- <a href="#">#ハッシュタグ2</a>
77
- </span>
78
- </li>
79
-
80
- <!-- タイマー設定 3 -->
81
- <li class="keyword_item"> **親要素**
82
-            **子要素**
83
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
84
- <a href="#">#ハッシュ</a>
85
- </span>
86
-            **子要素**
87
- <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
88
- <a href="#">#ハッシュ2</a>
89
- </span>
90
- </li>
91
-
92
- <!-- タイマー設定 4 -->
93
- <li class="keyword_item"> **親要素**
94
-            **子要素**
95
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
96
- <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ</a>
97
- </span>
98
-            **子要素**
99
- <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
100
- <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ2</a>
101
- </span>
102
- </li>
103
-
104
- <!-- タイマー設定 5 -->
105
- <li class="keyword_item"> **親要素**
106
-            **子要素**
107
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
108
- <a href="#">#ハッシュタグ</a>
109
- </span>
110
-            **子要素**
111
- <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
112
- <a href="#">#ハッシュタグ2</a>
113
- </span>
114
- </li>
115
-
116
- <!-- タイマー設定 6 -->
117
- <li class="keyword_item"> **親要素**
118
-            **子要素**
119
- <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
120
- <a href="#"><a href="#">#ハッシュタグ#ハッシュ</a></a>
121
- </span>
122
-            **子要素**
123
- <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
124
- <a href="#">#ハッシュタグ#ハッシュ2</a>
125
- </span>
126
- </li>
127
- </ul>
128
- <!-- /.keyword_list -->
129
- ```
130
-
131
- > スタイルシート
132
- ```
133
- /* ---------------------------------------------------------------------------------------------
134
- KEYWORD
135
- --------------------------------------------------------------------------------------------- */
136
- .keyword_list{
137
- width:100%;
138
- display: flex;
139
- list-style: none;
140
- padding: 0;
141
- }
142
-
143
24
  .keyword_list li{
144
25
  width: 15%;
145
26
  margin-right: 1.66666%;
@@ -150,6 +31,144 @@
150
31
  justify-content: center;
151
32
  text-align: center;
152
33
  }
34
+ ```
35
+
36
+
37
+ > https://teratail.com/questions/40956 (以下、参照したコード)
38
+ ```
39
+ $(".about_sale_main").each(function(index) {
40
+ if($("section:not([class*='hidden-'])", this).length == 0){
41
+ // hidden-を含まないsectionが0個、つまり全てhidden-を含んでいるので見えていない
42
+ $(this).addClass("hidden-not-display");
43
+ }
44
+ else {
45
+ $(this).removeClass("hidden-not-display");
46
+ }
47
+ });
48
+ ```
49
+ ### 該当のソースコード
50
+
51
+ > うまくいっていないHTMLの箇所(不明なIDが付いてしまった「id="sizzle1655950385117"」)
52
+ ```
53
+ <li class="keyword_item" id="sizzle1655950385117">
54
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00" style="display: none;">
55
+ <a href="#">#ハッシュタグ</a>
56
+ </span>
57
+ </li>
58
+ ```
59
+
60
+ > 実際に自分で改変してみたJavaScript
61
+ ```
62
+ //https://teratail.com/questions/40956
63
+ $(".keyword_item").each(function(index) {
64
+ if($("span([style*='inline'])", this).length == 0){
65
+ // spanタグにdisplay:inlineが1つもなければ
66
+ $(this).addClass("hidden-display");
67
+ }
68
+ else {
69
+ $(this).removeClass("hidden-display");
70
+ }
71
+ });
72
+ ```
73
+
74
+ > 実際のHTML
75
+ ```
76
+ <!-- .keyword_list -->
77
+ <ul class="keyword_list mt10 mb20">
78
+ <!-- タイマー設定 1 -->
79
+ <li class="keyword_item"> **親要素**
80
+            **子要素**
81
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/22 10:00">
82
+ <a href="#">#ハッシュタグ</a>
83
+ </span>
84
+
85
+ </li>
86
+
87
+ <!-- タイマー設定 2 -->
88
+ <li class="keyword_item"> **親要素**
89
+            **子要素**
90
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
91
+ <a href="#">#ハッシュタグ</a>
92
+ </span>
93
+            **子要素**
94
+ <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
95
+ <a href="#">#ハッシュタグ2</a>
96
+ </span>
97
+ </li>
98
+
99
+ <!-- タイマー設定 3 -->
100
+ <li class="keyword_item"> **親要素**
101
+            **子要素**
102
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
103
+ <a href="#">#ハッシュ</a>
104
+ </span>
105
+            **子要素**
106
+ <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
107
+ <a href="#">#ハッシュ2</a>
108
+ </span>
109
+ </li>
110
+
111
+ <!-- タイマー設定 4 -->
112
+ <li class="keyword_item"> **親要素**
113
+            **子要素**
114
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
115
+ <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ</a>
116
+ </span>
117
+            **子要素**
118
+ <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
119
+ <a href="#">#ハッシュタグ#ハッシュタグ#ハッシュ2</a>
120
+ </span>
121
+ </li>
122
+
123
+ <!-- タイマー設定 5 -->
124
+ <li class="keyword_item"> **親要素**
125
+            **子要素**
126
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
127
+ <a href="#">#ハッシュタグ</a>
128
+ </span>
129
+            **子要素**
130
+ <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
131
+ <a href="#">#ハッシュタグ2</a>
132
+ </span>
133
+ </li>
134
+
135
+ <!-- タイマー設定 6 -->
136
+ <li class="keyword_item"> **親要素**
137
+            **子要素**
138
+ <span class="view_timer" data-start-date="2022/6/20 10:00" data-end-date="2022/6/30 10:00">
139
+ <a href="#"><a href="#">#ハッシュタグ#ハッシュ</a></a>
140
+ </span>
141
+            **子要素**
142
+ <span class="view_timer" data-start-date="2022/6/30 10:00" data-end-date="2022/7/15 10:00">
143
+ <a href="#">#ハッシュタグ#ハッシュ2</a>
144
+ </span>
145
+ </li>
146
+ </ul>
147
+ <!-- /.keyword_list -->
148
+ ```
149
+
150
+ > スタイルシート
151
+ ```
152
+ /* ---------------------------------------------------------------------------------------------
153
+ KEYWORD
154
+ --------------------------------------------------------------------------------------------- */
155
+ .keyword_list{
156
+ width:100%;
157
+ display: flex;
158
+ list-style: none;
159
+ padding: 0;
160
+ }
161
+
162
+ .keyword_list li{
163
+ width: 15%;
164
+ margin-right: 1.66666%;
165
+ background: #fdeff2;
166
+ padding: 0.5%;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ text-align: center;
171
+ }
153
172
 
154
173
  .keyword_list li a{
155
174
  font-weight: 700;

1

タイトルを修正しました(親要素を消には ⇒ 親要素を消すには)

2022/06/23 02:38

投稿

na818
na818

score1

test CHANGED
@@ -1 +1 @@
1
- 子要素がすべてdisplay noneだったら(=display:inlineがなければ)、親要素を消には
1
+ 子要素がすべてdisplay noneだったら(=display:inlineがなければ)、親要素を消には
test CHANGED
File without changes