お世話になります。Jsを学び出し始めた初心者です。 Javascriptで、「あるクラスが特定数以下の場合、ボタンを消す」ということをしたいのですが、うまく動きません。ブラウザのコンソールでは、 Uncaught TypeError: gradBtnRemove.remove is not a function というエラーが出ていますが、調べて色々試したのですがうまくいかず… alert() で確認すると、数とかはきちんと取得されているようなのですが、 remove(); にした途端、動かなくなります。どこの書き方が悪いのでしょうか？どなたかご教授いただけると幸いです。 .grad-btn { width: 40vw; height: 22px; display: block; margin: 50px auto; padding: 20px; background-color: #3a6689; color: white; text-align: center; vertical-align: middle; } aaa bbb ccc ddd eee 続きを見る const moreViewNoneJs = document.getElementsByClassName('item'); let lenJs = moreViewNoneJs.length; let gradBtnRemove = document.getElementsByClassName('grad-btn'); if (lenJs

こんにちは getElementsByClassName が返す値は、ノードリストと言われる配列風のオブジェクトです。 https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName ですので、結果の要素数が1つであっても、配列的な扱いが必要になります。エラーメッセージもそのことを指しています。（＝直接のメソッドとしては存在しない。）具体的には、 gradBtnRemove[0].remove(); などとしておけば、要素は削除されます。

詳しい人求む！

JavaScriptで、あるクラス名が特定数以下の場合、ボタンを消したい

解決済

質問者：kotamagokotama
質問日時：2021/08/26 14:50
回答数：1件

お世話になります。Jsを学び出し始めた初心者です。

Javascriptで、
「あるクラスが特定数以下の場合、ボタンを消す」
ということをしたいのですが、うまく動きません。

ブラウザのコンソールでは、
Uncaught TypeError: gradBtnRemove.remove is not a function
というエラーが出ていますが、調べて色々試したのですがうまくいかず…

alert() で確認すると、数とかはきちんと取得されているようなのですが、
remove(); にした途端、動かなくなります。
どこの書き方が悪いのでしょうか？

どなたかご教授いただけると幸いです。

<!DOCTYPE html>
<head>
<style>
.grad-btn {
width: 40vw;
height: 22px;
display: block;
margin: 50px auto;
padding: 20px;
background-color: #3a6689;
color: white;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<section>

<div class="item element2">aaa</div>
<div class="item element2">bbb</div>
<div class="item element2">ccc</div>
<div class="item element2">ddd</div>
<div class="item element2">eee</div>

<label class="grad-btn" for="trigger1">続きを見る</label>
</section>

<script>
const moreViewNoneJs = document.getElementsByClassName('item');
let lenJs = moreViewNoneJs.length;
let gradBtnRemove = document.getElementsByClassName('grad-btn');
if (lenJs < 3) {
gradBtnRemove.remove();
}
</script>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/08/26 15:38

こんにちは

getElementsByClassName が返す値は、ノードリストと言われる配列風のオブジェクトです。
https://developer.mozilla.org/ja/docs/Web/API/Do …

ですので、結果の要素数が1つであっても、配列的な扱いが必要になります。
エラーメッセージもそのことを指しています。
（＝直接のメソッドとしては存在しない。）

具体的には、
　gradBtnRemove[0].remove();
などとしておけば、要素は削除されます。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

できました。
（テストではうまくいくのに、本物に入れるとこっちの数の指定通り動かないというおかしい現象が起きていますが、とりあえずできました。サイトの仕様が絡んでいると思っておきます）

クラス要素を削除するというのを見ていたときに「配列」というのが出てきたのですが、そのことだったのですね。
それは選んだクラス要素全てを消すfor文だったので違うのかなとスルーしてしまったのがダメだったのですね。

もっと勉強して、さらっと書けるようになりたいです。
本当にありがとうございました。

通報する

お礼日時：2021/08/26 16:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！