質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

sliderを複数追加、削除ボタンしたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 93

score 2

前提・実現したいこと

[html/javascript/jquery]
jqueryでsliderを使用したサイトを作成しています。
追加ボタンをクリックした時にsliderが追加され、削除ボタンをクリックすると要素が消されるようにしたいです。
要素を消す時に1番上のsliderだけ消されないようにする方法はありますでしょうか。(1番上まで消されてしまうと、追加ボタンが機能しなくなってしまいます。)

発生している問題・エラーメッセージ

sliderをいくつか追加してから削除ボタンをクリックすると、上に謎の空白が出来てしまうので、それの改善方法も教えていただけると幸いです。
イメージ説明

該当のソースコード

<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">

    <style type="text/css">
    </style>
  </head>
<body>
    <div id="target">
        <div>
            <div class="slider1" style="padding: 5px 25px;">
                <div id="slider1"  style= "width: 350px;"></div>
            </div>
            <div class="slider2" style="padding: 5px 25px;">
                <div id="slider2"  style= "width: 350px;"></div>
            </div>
            <div class="slider3" style="padding: 5px 25px;">
                <div id="slider3"  style= "width: 350px;"></div>
            </div>
        </div>
    </div> 
    <input type="button" value="追加" id="tsuika" />
    <input type="button" value="削除" id="sakujo" />
</body>
<script>    
    //スライダー1
    $("#slider1").slider({
        max:254, //最大値
        min: 1, //最小値
        value: 50, //初期値
        step: 1, //幅
    });

    //スライダー2
    $("#slider2").slider({
        max:254, //最大値
        min: 1, //最小値
        value: 50, //初期値
        step: 1, //幅
    });

    //スライダー3
    $("#slider3").slider({
        max:254, //最大値
        min: 1, //最小値
        value: 50, //初期値
        step: 1, //幅
    });

    //追加ボタン
    function addExample() {
        let elements = document.getElementById("target");
        let copied = elements.lastElementChild.cloneNode(true);
        elements.appendChild(copied);
    }

    //////ボタンにイベントハンドラをセット//////
    const btn = document.getElementById("tsuika");
    btn.addEventListener("click", addExample, false);

    //削除ボタン
    $("#sakujo").on("click", function(){
        const element1 = document.getElementById('slider1');
        const element2 = document.getElementById('slider2');
        const element3 = document.getElementById('slider3');
        element1.remove();
        element2.remove();
        element3.remove();
    });      
</script>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • luuguas

    2021/11/24 18:47

    ソースコードを試してみたところ、ボタンを押すとsliderが同時に3つ追加・削除されましたが、この通りで良いですか。それともsliderは1つずつ追加・削除したいですか。

    キャンセル

  • cfds

    2021/11/24 18:50

    3つ同時に追加・削除したいと考えています。
    分かりづらくてすみません。

    キャンセル

回答 1

checkベストアンサー

0

  • 追加は囲んだdiv毎なのに削除はslider単体ずつ行っているので、差異のdiv分空白が生まれています
  • 追加分にsliderが設定されていません
  • スタイルを個別で指定するのは冗長です
  • sliderを個別で設定するのは冗長です

上記改善点を含めたコード案です。

<!DOCTYPE html>
<html lang="ja-JP">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">

    <style type="text/css">
    </style>
  </head>

  <body>
    <div id="target">
      <div class='sliderContainer'>
        <div>
          <div class="slider slider1"></div>
        </div>
        <div>
          <div class="slider slider2"></div>
        </div>
        <div>
          <div class="slider slider3"></div>
        </div>
      </div>
    </div>
    <input type="button" value="追加" id="tsuika" />
    <input type="button" value="削除" id="sakujo" />
  </body>
  <script>
    //スライダ設定関数
    function setSliderGroup(target) {
      $(target).find('.slider1').slider({
        max: 254, //最大値
        min: 1, //最小値
        value: 100, //初期値
        step: 1, //幅
      })

      $(target).find('.slider2').slider({
        max: 254, //最大値
        min: 1, //最小値
        value: 200, //初期値
        step: 1, //幅
      })

      $(target).find('.slider3').slider({
        max: 254, //最大値
        min: 1, //最小値
        value: 50, //初期値
        step: 1, //幅
      })
    }

    //スライダを設定
    setSliderGroup($(".sliderContainer"))

    //追加ボタン
    $('#tsuika').on('click', function() {
      const elements = document.getElementById("target");
      const copied = elements.lastElementChild.cloneNode(true);
      //追加要素にスライダを設定
      setSliderGroup($(copied))
      elements.appendChild(copied);
    })

    //削除ボタン
    $("#sakujo").on("click", function() {
      const elements = document.getElementById("target");
      //スライダ郡が一つだけだったら何もしない
      if ($(elements).children().length == 1) return
      elements.lastElementChild.remove();
    });

  </script>

  <style>
    .sliderContainer>div {
      padding: 5px 25px;
    }

    .slider {
      width: 350px;
    }

  </style>

</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/11/25 01:16 編集

    分かりやすく回答してくださり、ありがとうございます。
    sliderの最大値や最小値をそれぞれ変更したい場合はどのようにしたら良いでしょうか。
    ご回答いただけると幸いです。

    キャンセル

  • 2021/11/26 14:52

    追記ありがとうございます。
    無事完成させることが出来ました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る