1
作成した動的要素を削除する場合は、「削除」関数または - 関数を作成しようとしています。そのようなスニペットとして、私は新しい動的要素を作成しますが、最後の要素を削除するための作業減算方法はありません。例えば、誰かが+ボタンを何度も押すと、最後の要素を削除するために - ボタンを押すことができます。この場合、最後の要素は「ラッパー」になります。作成された動的要素の削除
ありがとうございました。
\t \t var template;
\t \t var a = 1;
\t \t window.onload = function() {
\t \t \t template = document.querySelector("#wrapper").innerHTML;
\t \t \t document.querySelector("#more_fields").addEventListener("click", function(e) {
\t \t \t \t e.preventDefault(); // tell the browser to not send the form
\t \t \t \t document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); // add next segment
\t \t \t \t document.querySelector("#wrapper > label:last-of-type").innerHTML = "Segment " + (++a) + ":"; //Updates Segment #
\t \t \t });
\t \t }
function deleteMe(e) {
\t \t \t e.preventDefault();
\t \t \t var btn = document.getElementById("#wrapper");
\t \t \t btn.onclick = function() {
\t \t \t \t this.remove();
\t \t \t };
\t \t }\t \t \t <div id="room_fileds">
\t \t \t \t <div class="content" id="wrapper">
\t \t \t \t \t <label name="seg[]" style="margin:0 0 10px 60px;display: inline;">Segment: 1</label>
\t \t \t \t \t <div class="form-group" style="display: inline;">
\t \t \t \t \t \t <label name=seg-in[] style="margin:0 0 10px 20px;display: inline;">IN :</label>
\t \t \t \t \t \t <input class="form-control" id="seg-in" placeholder="HH:MM:SS:FF (DF)" type="text" style="Width:15%;display: inline;">
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group" style="display: inline;">
\t \t \t \t \t \t <label name=seg-out[] style="margin:0 0 10px 20px;display: inline;">OUT :</label>
\t \t \t \t \t \t <input class="form-control" id="seg-out" type="text" placeholder="HH:MM:SS:FF (DF)" style="Width:15%;display: inline;">
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group" style="display: inline;">
\t \t \t \t \t \t <label name=seg-dur[] style="margin:0 0 10px 20px;display: inline;">Duration:</label>
\t \t \t \t \t \t <input class="form-control" id="seg-dur" type="text" placeholder="HH:MM:SS:FF (DF)" style="Width:15%;display: inline;">
\t \t \t \t \t </div>
\t \t \t \t \t <br><br>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div style="text-align:right;">
\t \t \t \t <div style="display:inline;text-align: right;">
\t \t \t \t \t <button onclick="deleteMe();" style="height: 25px;width:13px;" id="less_fields">-</button>
\t \t \t \t </div>
\t \t \t \t <div style="display:inline;text-align: right;">
\t \t \t \t \t <button id="more_fields">+</button>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <br><br>
\t \t \t <button type="submit" class="btn btn-default">Submit</button>
あなたは[、最小限の完全な、検証可能な例]を持っているように、 '変化（）'メソッドを含めるように、あなたのスニペットを更新してください（https://stackoverflow.com/help/mcve） – Pineda
ちょうどあなたがした直前に、あなたのページを更新=）、おかげで – David
私はあなたのラベルのセグメントの周りにラッパーを配置し、何らかの方法でそれらを識別することをお勧めします通常クラスで）削除してから削除してください。それらを '
'で区切ると、何にグループ化されているのかを判断するのが難しくなります。 –