javascript - 删除创建的动态元素

Question

我正在尝试创建一个“删除”函数或 - 函数(如果您愿意的话)来删除我创建的动态元素。因此，我创建了一个新的动态元素，但是我没有有效的减法方法来删除最后创建的元素。例如，如果有人多次点击“+”按钮，他们就可以点击“-”按钮来删除最后一个元素。在这种情况下，最后一个元素将是“包装器”。

谢谢，任何帮助表示感谢。

		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
				document.querySelector("#wrapper > label:last-of-type").innerHTML = "Segment " + (++a) + ":"; //Updates Segment #
			});
		}

            function deleteMe(e) {
			e.preventDefault();
			var btn = document.getElementById("#wrapper");
			btn.onclick = function() {
				this.remove();
			};
		}

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

					<div class="form-group" style="display: inline;">
						<label name=seg-dur[] style="margin:0 0 10px 20px;display: inline;">Duration:</label>
						<input class="form-control" id="seg-dur" type="text" placeholder="HH:MM:SS:FF (DF)" style="Width:15%;display: inline;">
					</div>
					<br><br>
				</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>
			<br><br>
			<button type="submit" class="btn btn-default">Submit</button>

Answer 1

您当前正在添加新段作为第一个段的相邻元素，无法通过类或 ID 来区分它们。

我首先建议修改您的代码，以便将段元素包装在另一个 div 中，并为其指定类 .segment。这样您就可以使用 文档了。 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 #
    			});
    		}

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

    		

    			<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>
    	<div class="form-group" style="display: inline;">
    	  <label name=seg-in[] style="margin:0 0 10px 20px;display: inline;">IN :</label>
    	  <input class="form-control" id="seg-in" placeholder="HH:MM:SS:FF (DF)" type="text" style="Width:15%;display: inline;">
    	</div>
    	<div class="form-group" style="display: inline;">
    	  <label name=seg-out[] style="margin:0 0 10px 20px;display: inline;">OUT :</label>
    	  <input class="form-control" id="seg-out" type="text" placeholder="HH:MM:SS:FF (DF)" style="Width:15%;display: inline;">
    	</div>

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