sliderを連番で複数追加、削除したい。

前提・実現したいこと

[html/javascript/jquery]
rangeを使ってsliderを表示するサイトを作成しています。
追加ボタンをクリックした時にsliderが追加され、削除ボタンをクリックすると要素が消されるようにしたいです。(1番上は消されない。)

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

このエラーをどうしても解決することが出来ません。type errorは打ち間違いということでしょうか。

Uncaught TypeError: Cannot read properties of null (reading 'lastElementChild')
    at HTMLButtonElement.<anonymous> (renban.html:84)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.v.handle (jquery.min.js:2)

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>renban.html</title>
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
8    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
9    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css">
10</head>
11<body>
12    <div id="target" class='sliderContainer'>
13        <div class ="brislider">
14            <label for="bri">bri</label><input type="range" value="0" id="bri" min="0" max="254" step="1" oninput="color_change_range()">
15            <input type="number" value="0" min="0" max="255" id="bri_num" oninput="color_change_num()">
16        </div>
17        <div class ="satslider">
18            <label for="sat">sat</label><input type="range" value="0" id="sat" min="0" max="254" step="1" oninput="color_change_range()">
19            <input type="number" value="0" min="0" max="255" id="sat_num" oninput="color_change_num()">
20        </div>
21        <div class ="hueslider">
22            <label for="hue">hue</label><input type="range" value="0" id="hue" min="0" max="255" step="1" oninput="color_change_range()">
23            <input type="number" value="0" min="0" max="255" id="hue_num" oninput="color_change_num()">
24        </div>
25    </div>
26
27    <div class="start" style="padding: 5px 20px;">
28        <button id="tsuika">追加</button>
29        <button id="sakujo">削除</button>
30    </div>
31<script>
32    $(function(){
33
34        //スライダ設定関数
35        function setSliderGroup(target) {
36            // 色が変更された時に実行（スライダー）
37            function color_change_range() {
38                var bri = document.getElementById("bri").value;
39                var sat = document.getElementById("sat").value;
40                var hue = document.getElementById("hue").value;
41
42                //numberに反映
43                document.getElementById("bri_num").value = bri;
44                document.getElementById("sat_num").value = sat;
45                document.getElementById("hue_num").value = hue;
46            }
47
48            // 色が変更された時に実行（数値入力）
49            function color_change_num() {
50                var bri = document.getElementById("bri_num").value;
51                var sat = document.getElementById("sat_num").value;
52                var hue = document.getElementById("hue_num").value;
53                
54                //rangeに反映
55                document.getElementById("bri").value = bri;
56                document.getElementById("sat").value = sat;
57                document.getElementById("hue").value = hue;
58            }
59        }
60
61        //スライダを設定
62        setSliderGroup($(".sliderContainer"))
63
64        //sliderのidを連番にする
65        $('div.sliderContainer').each(function(i){
66            $(this).attr('id','target' + (i+1));
67        });
68
69        $('div.brislider').find('input[type="range"]').each(function(i) {
70            $(this).attr("id",'bri' + (i+1));
71        });
72
73        $('div.satslider').find('input[type="range"]').each(function(i) {
74            $(this).attr("id",'sat' + (i+1));
75        });
76
77        $('div.hueslider').find('input[type="range"]').each(function(i) {
78            $(this).attr("id",'hue' + (i+1));
79        });
80
81        //追加ボタン
82        $('#tsuika').on('click', function() {
83            const elements = document.getElementById("target");
84            const copied = elements.lastElementChild.cloneNode(true);
85            //追加要素にスライダを設定
86            setSliderGroup($(copied))
87            elements.appendChild(copied);
88        })
89
90        //削除ボタン
91        $("#sakujo").on("click", function() {
92            const elements = document.getElementById("target");
93            //スライダ郡が一つだけだったら何もしない
94            if ($(elements).children().length == 1) return
95            elements.lastElementChild.remove();
96        });
97    });
98
99</script>
100</body>
101</html>

試したこと

sliderを3つ共追加したいので、idを同じものにコピーされるようにしました。

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

回答1件

ベストアンサー

type error は型エラーで、ここでは

javascript
1const elements = document.getElementById("target");  // この結果が null。取れてない。
2const copied = elements.lastElementChild.cloneNode(true);  // で、lastElementChildの呼び出し失敗。

ということです。

原因は、この部分で、

javascript
1        //sliderのidを連番にする
2        $('div.sliderContainer').each(function(i){
3            $(this).attr('id','target' + (i+1));
4        });

やりたい事は「div.sliderContainer」の子要素をeachで回したいんでしょうけど、children()を呼んでいないので「div.sliderContainer」そのものがeachの対象になっており、idが「target」から「target1」に書き換わってしまっています。

これを以下に書き換えるとエラー解消されます。

javascript
1        //sliderのidを連番にする
2        $('div.sliderContainer').children().each(function(i){   // children()追加
3            $(this).attr('id','target' + (i+1));
4        });
5