formのinputのvalueに値が入っているかどうかで表示・非表示切り替え

Question

下記の場合において、
１. input[name="image"]のvalueに値が入っている場合、buttonを表示
２. input[name="image"]のvalueに値が入っていない場合、buttonを非表示
という仕組みが欲しいです。

<input type="hidden" id="image" name="image" value="">
<button type="button"  onclick="clearValue(image);" class="delete" id="delete">削除</button>

宜しくお願いいたします。

追記
スミマセン…すっかり忘れてました。
今はこんな風にかいておりますが、ダメです。。

(function() {
  if ($("#image").prop("undefined"))
  {
    document.getElementById("delete").style.display="none";
  }
  else
  {
    document.getElementById("delete").style.display="block";
  }
}());

宜しくお願いいたします。

Comments

[mattn]

まずご自分で実装してみて分からなかった箇所で質問して下さい。

Answer 1

input[name="image"][value=""] + button {
  visibility: hidden;
}

Comments

[massiveGorilla]

難しく考えすぎていました！ありがとうございます！！

[kei344]

To: knk0305さん
「[value=""]」は画面描画時の属性値を参照するので、文字を入力しても非表示のままですので、別途表示の仕組みはいると思いますよ。

[x_x]

type="hidden"なので入力できないと思いますが……

[kei344]

To: x_xさん
失礼しました、質問文が読めていなかったです。

[massiveGorilla]

val();で値を入れたり消したりする仕組みなので、x_xさんのでばっちり動きました。
お二方ともありがとうございました。