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

前提・実現したいこと

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

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

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

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja-JP">
3  <head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>sample</title>
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
10    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">
11
12    <style type="text/css">
13    </style>
14  </head>
15<body>
16    <div id="target">
17        <div>
18            <div class="slider1" style="padding: 5px 25px;">
19                <div id="slider1"  style= "width: 350px;"></div>
20            </div>
21            <div class="slider2" style="padding: 5px 25px;">
22                <div id="slider2"  style= "width: 350px;"></div>
23            </div>
24            <div class="slider3" style="padding: 5px 25px;">
25                <div id="slider3"  style= "width: 350px;"></div>
26            </div>
27        </div>
28    </div> 
29    <input type="button" value="追加" id="tsuika" />
30    <input type="button" value="削除" id="sakujo" />
31</body>
32<script>    
33    //スライダー1
34    $("#slider1").slider({
35        max:254, //最大値
36        min: 1, //最小値
37        value: 50, //初期値
38        step: 1, //幅
39    });
40    
41    //スライダー2
42    $("#slider2").slider({
43        max:254, //最大値
44        min: 1, //最小値
45        value: 50, //初期値
46        step: 1, //幅
47    });
48    
49    //スライダー3
50    $("#slider3").slider({
51        max:254, //最大値
52        min: 1, //最小値
53        value: 50, //初期値
54        step: 1, //幅
55    });
56       
57    //追加ボタン
58    function addExample() {
59        let elements = document.getElementById("target");
60        let copied = elements.lastElementChild.cloneNode(true);
61        elements.appendChild(copied);
62    }
63            
64    //////ボタンにイベントハンドラをセット//////
65    const btn = document.getElementById("tsuika");
66    btn.addEventListener("click", addExample, false);
67    
68    //削除ボタン
69    $("#sakujo").on("click", function(){
70        const element1 = document.getElementById('slider1');
71        const element2 = document.getElementById('slider2');
72        const element3 = document.getElementById('slider3');
73        element1.remove();
74        element2.remove();
75        element3.remove();
76    });      
77</script>
78</html>

luuguas

2021/11/24 09:47

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

cfds

2021/11/24 09:50

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

行動規範の内容に同意します

回答1件

ベストアンサー

追加は囲んだ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/24 10:34

編集2021/11/25 02:07