删除创建的动态元素

Question

我试图创建＆＃34;删除＆＃34;函数或函数，如果你将删除我创建的动态元素。因此我创建了一个新的动态元素片段，但我没有一个工作减法方法来删除最后一个元素创建。例如，如果有人多次按下+按钮，他们就可以点击 - 按钮以删除最后一个元素。在这种情况下，最后一个元素将是＆＃34;包装器＆＃34;。

谢谢，任何帮助表示赞赏。

＆＃13;

＆＃13;

		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();
			};
		}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您目前正在将新细分作为相邻元素添加到第一个元素中，无法通过类或ID区分它们。

我首先建议您修改代码，以便将segment元素包装在另一个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 #
    			});
    		}

                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>