JQueryで要素を消すスクリプト！ECサイトの注意書きにもオススメ！

ホーム
jQuery
JQueryで要素を消すスクリプト！ECサイトの注意書きにもオススメ！

2018.08.4

JQueryで要素を消すスクリプト！ECサイトの注意書きにもオススメ！

みなさんこんにちは、mayukouです。ECサイトには、配送に関するお知らせなど、常時載せておかないといけない情報があります。でも、ずっと出しているとあまり美しくない。そんな時は、読んだら、見ている人が自分の意思で消せるようにしました。JQueryで実現できます。ぜひ試して見てください。

スポンサードリンク

デモはこちら

DEMO

スクリプトの解説

ここでは、クリックしたら要素を消す、というスクリプトを使用します。.clickと.removeを使っています。

CSSは任意で整えてください。

HTMLはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>


<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://use.fontawesome.com/3c70fafead.js"></script>
<script>
$(function(){
  //
  $('#btn1').click(function(){
    $(".oshirase").remove();
  });
});
</script>
<div class="oshirase"><a id="btn1"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
<div id="dv1">ここに、お知らせが入ります。天気による配送の情報など。</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

$(".oshirase").remove();

});

</script>

<div id="dv1">ここに、お知らせが入ります。天気による配送の情報など。</div>

</div>

</body>

</html>

最後に

いかがでしたか？ECサイトやブログ運営者で必要性を感じたらぜひ使って見てください。

投稿者プロフィール

mayukou: Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市でハーブティー専門店のデザイナーをしています。デザイナー10年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。