jQueryでFlash, error_messageを閉じる方法(Bootstrap xボタンが反応しない場合)。

##はじめに

*（注意：この記事は学習の一環として実装した物の一部を記事にしています。本記事には正しくない情報、方法を含んでいる可能性があります。）

Bootstrapのflash,error_messagesなどに使われる
<div class= "alert alert-○○">
が閉じない場合の対処法です。
私の環境が悪く閉じるアクションができないのか定かではありませんが
jQueryを使って閉じるアクションを可能にする方法を書いておきます。

私の場合、xマークのボタンは表示できましたがクリックをしても一切反応しませんでした。

##開発環境

• bootstrap-sass (3.3.7)
• devise (4.7.1)
• jquery-rails (4.3.1)
• rails (5.2.4.1)

##Flashやerror_messagesにxボタンをつける
こちら Bootstrap4版
こちら Bootstrap3版
上記のサイトのサンプルを確認すると

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

サイトでは、↓

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).

簡単に要約するとalertなどを閉じる時は
class=alert-dismissible をalertコンテナに
<button>タグにclass="close",data-dismiss="alert"
を記入すればxボタンクリック時に消えますよと。

(私の環境で何か導入し忘れのものがある、もしくは、Javascript,jQueryで閉じるアクションする前提なのかもしれません。わかる方宜しければコメントなどで教えてください。)

##jQueryで閉じるイベント

applivation.js

$(function() {
  $(".close").click(function() {
    $(".alert").hide();
  });
});

#参考サイト
w3schools.com
(https://www.w3schools.com/bootstrap/bootstrap_alerts.asp)
(https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp)

##終わりに
xボタンを押した際にBootstrapを適用したクラスのFlashやエラーメッセージを閉じることができると思います。
jQuery、Javascriptの重要性を再確認できました。