刪除動態元素創建

我想創建一個「刪除」函數或 - 函數，如果你會刪除我創建的動態元素。正如這樣的片段我創建了一個新的動態元素，但我沒有一個工作減法方法來刪除最後一個元素創建。例如，如果有人多次點擊+按鈕，他們將能夠點擊 - 按鈕以刪除最後一個元素。在這種情況下，最後一個元素將是「包裝器」。刪除動態元素創建

謝謝，任何幫助表示讚賞。

\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>

來源

2017-06-22 David

請更新您的片段，包括了'變化（）'方法，讓你有一個[最小，完全，可覈查示例] （https://stackoverflow.com/help/mcve） – Pineda

在你做之前就抓住它，刷新你的頁面=），儘管 – David

我建議你在你的標籤片段上加一個包裝並以某種方式標識它們（平時與類），然後刪除它們。用'

'來分隔它們只是使它更難確定什麼是分組的。 –

您目前正在添加新的細分相鄰元素到第一，沒有辦法通過類ID也不區分他們的。

我首先建議修改您的代碼，以便將段元素包裝到另一個div中並將其賦予類.segment。這樣，您可以使用document. querySelector來定位最後一類.segment。

var btn = document.querySelector("#wrapper > div.segment:last-of-type");

看看這個片斷：

var template; 
 
var a = 1; 
 

 
window.onload = function() { 
 
    template = document.querySelector("#wrapper").innerHTML; 
 
    document.querySelector("#more_fields").addEventListener("click", function(e) { 
 
    e.preventDefault(); // tell the browser to not send the form 
 
    document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); 
 
// add next segment 
 
var numOfSegments = document.querySelectorAll("div.segment").length; 
 
    document.querySelector("div.segment:last-of-type > label").innerHTML = "Segment " + (numOfSegments) + ":"; //Updates Segment # 
 
    \t \t \t }); 
 
    \t \t } 
 

 
       function deleteMe() { 
 
    \t \t \t var btn = document.querySelector("#wrapper > div.segment:last-of-type"); 
 
    \t \t \t btn.remove(); 
 
    \t \t }

 \t \t 
 

 
    \t \t \t <div id="room_fileds"> 
 
    <div class="content" id="wrapper"> 
 
     <div class="segment"> 
 
     <label name="seg[]" style="margin:0 0 10px 60px;display: inline;">Segment: 1</label> 
 
    \t <div class="form-group" style="display: inline;"> 
 
    \t <label name=seg-in[] style="margin:0 0 10px 20px;display: inline;">IN :</label> 
 
    \t <input class="form-control" id="seg-in" placeholder="HH:MM:SS:FF (DF)" type="text" style="Width:15%;display: inline;"> 
 
    \t </div> 
 
    \t <div class="form-group" style="display: inline;"> 
 
    \t <label name=seg-out[] style="margin:0 0 10px 20px;display: inline;">OUT :</label> 
 
    \t <input class="form-control" id="seg-out" type="text" placeholder="HH:MM:SS:FF (DF)" style="Width:15%;display: inline;"> 
 
    \t </div> 
 

 
    \t <div class="form-group" style="display: inline;"> 
 
    \t <label name=seg-dur[] style="margin:0 0 10px 20px;display: inline;">Duration:</label> 
 
    \t <input class="form-control" id="seg-dur" type="text" placeholder="HH:MM:SS:FF (DF)" style="Width:15%;display: inline;"> 
 
    \t </div> 
 
     </div> 
 
    </div> 
 

 
</div> 
 
<div style="text-align:right;"> 
 
    <div style="display:inline;text-align: right;"> 
 
    <button onclick="deleteMe();" style="height: 25px;width:13px;" id="less_fields">-</button> 
 
</div> 
 
<div style="display:inline;text-align: right;"> 
 
    <button id="more_fields">+</button> 
 
    </div> 
 
</div> 
 
<button type="submit" class="btn btn-default">Submit</button>

來源

2017-06-22 01:00:15 Pineda

感謝輸入工作得很好，只有1個問題，它似乎當我使用減法按鈕它重置我的論壇，就好像它正在提交 – David

啊，哈哈，可能是因爲我刪除評論了preventDefault :)。 – Pineda

哈哈是啊我補充說，但我得到一個相當奇怪的錯誤，有點難以解釋。但如果我添加一個動態元素一切都很好。如果我試圖扣除一個元素，當一個必填字段未填寫時，元素將被減去，表單將顯示「必填字段必須填寫」等。當我扣除所有填寫表單提交的必填字段時。我改變了deleteMe（）方法，如下所示：\t \t function deleteMe（）{ \t \t \t var btn = document.querySelector（「＃wrapper> div.segment：last-of-type」）; \t \t \t btn.remove（）; \t \t \t e.preventDefault（）;} – David

刪除動態元素創建

回答

相關問題