【jQuery】要素表示がなぜかできない【原因はd-noneでした】

概要

デフォルト非表示にしている要素に対し、jQueryのshowメソッドを使い、要素を表示(追加)させる実装をした際、d-noneにやられた話です。
言わずもがな、デザインはBootstrapを使ってます。

実装したこと

+ボタンを押すと、d-noneしている入力フォームを表示させたい。
コードは以下の通り。大したことはしていない。

test.html

<div class="col-md-4">
  <button type="button" class="btn btn-success rounded-circle p-0　style="width:2rem; height:2rem;" id="plus">
  ＋
  </button>
</div>

<div class="col-md-4 d-none" id="addText">
  <input type="text" name="memo" class="form-control">
</div>

test.js

jQuery(function () {
    $('#plus').click( function () {
        $('#addText').show();
    })
})

何が起きたか

表示されない。。。

デバッグした所、ログも吐けているのに何でやねんと思って調べた所、要素非表示の為のd-noneが悪さをしておりました。

原因は、

d-noneがshowメソッドより優先されてしまうから

でした。

詳しく追うと以下の通り。

• d-noneは、**display: none!important;**というCSSスタイルを追加する
• 一方、jQueryのshowメソッドではdisplay: blockというCSSスタイルを追加する
• 優先されるのはdisplay: none!important;（つまりd-noneが優先されてしまい、要素は非表示のままになる）

解決策

要素非表示をd-noneではなく、cssの**display: none;**を使って解決。

test.css

#addText{
  display: none;
}

（html側のd-noneは削除してください）

無事表示出来ました。

まとめ

表示on/offの実装をしたい時はd-noneは避けましょう
もしd-noneを使う場合は、show()ではなく**removeClass('d-none')**を使いましょう

##文献
jquery - jQuery show()はBootstrap d-noneクラスを表示しません