セレクタを使用した画面表示の切り替え

セレクタを使用した画面表示の切り替えがうまくできません。

下記のようなコードを書いています。

HTML
1<dl class="InputForm" id="confInputForm">
2      <dt>合員ID</dt>
3      <dd>1234567890</dd>
4      <dt>名前</dt>
5      <dd>やまだたろう</dd>
6      <dt>ふりがな</dt>
7      <dd>やまだたろう</dd>
8</dl>

「会員ID」「1234567890」を非表示にしたいのですが、

JavaScript
1$("#confInputForm > dt:eq(0)").css('display', 'none');
2$("#confInputForm > dd:eq(0)").css('display', 'none');

と書いても非表示になりません。
根本的に何か間違っているのでしょうか？
ご教示頂けると幸いです。

皆様、ご回答ありがとうございました。

スマホページなのですが、実機で確認すると反映されていないのですが、
エミュレータでは反映されていることが確認できました。
別の問題かと思い、また新たに質問をさせて頂いております。
https://teratail.com/questions/60213

お手数おかけしてしまい大変申し訳ありませんでした。
コードの書き方や順番など、大変参考になりました。
ありがとうございました。

行動規範の内容に同意します

回答3件

処理自体はあっていると思うので、HTMLがロードされるまえに実行されていたりしないですか
以下のようにしてもだめですか

javascript
1$(function(){
2  $("#confInputForm > dt:eq(0)").css('display', 'none');
3  $("#confInputForm > dd:eq(0)").css('display', 'none');
4});

JSFiddleで実行してみた結果

投稿2016/12/26 08:19

編集2016/12/26 08:22

popobot

総合スコア6586

どこも間違っていないようにみえますが、jQueryは読み込んでいますか？また、タイプミスの可能性もあるので、もう一度質問者さんの手元のコードを見直してみてください。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<dl class="InputForm" id="confInputForm">
15    <dt>合員ID</dt>
16    <dd>1234567890</dd>
17    <dt>名前</dt>
18    <dd>やまだたろう</dd>
19    <dt>ふりがな</dt>
20    <dd>やまだたろう</dd>
21</dl>
22<input type="submit" value="dtを消す" id="delDt">
23<input type="submit" value="ddを消す" id="delDd">
24<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
25<script>
26    $("#delDt").click(function () {
27        $("#confInputForm > dt:eq(0)").css("display", "none");//$(".InputForm > dt:eq(0)").css("display", "none");でも可能
28    });
29    $("#delDd").click(function () {
30        $("#confInputForm > dd:eq(0)").css("display", "none");//$(".InputForm > dd:eq(0)").css("display", "none");でも可能
31    });
32</script>
33</body>
34</html>

投稿2016/12/26 08:26

編集2016/12/26 08:30

s8_chu

総合スコア14731

下記にコメントしてある部分に現在のコードを書いた場合、HTMLが読み込まれる前に実行されるので上手くいきません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7  <script>
8   // ここにコードを書く
9  </script>
10</head>
11<body>
12  
13</body>
14</html>

上手くいくようにするには、HTMLの読み込み後に実行する必要があります。
下記のように$(function(){...})を利用するか、HTMLコードの下側（bodyの閉じタグの直前）にscript要素を記述してください。

javascript
1// HTML上のどこに記述しても、HTMLの読み込み終了後に実行される。
2$(function(){
3  $("#confInputForm > dt:eq(0)").css('display', 'none');
4  $("#confInputForm > dd:eq(0)").css('display', 'none');
5});

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7</head>
8<body>    
9  <dl class="InputForm" id="confInputForm">
10      <dt>合員ID</dt>
11      <dd>1234567890</dd>
12      <dt>名前</dt>
13      <dd>やまだたろう</dd>
14      <dt>ふりがな</dt>
15      <dd>やまだたろう</dd>
16  </dl>
17  <script>
18   /* 上記のHTMLが読み込まれた後で実行される */
19  </script>
20</body>
21</html>