Удалить динамический элемент создан

1

Я пытаюсь создать функцию "удалить" или функцию, если вы удалите динамический элемент, который я создал. Таким образом, у фрагмента я создаю новый динамический элемент, но у меня нет рабочего метода вычитания для удаления последнего элемента. Например, если кто-то нажал кнопку + слишком много раз, они смогут нажать кнопку -, чтобы удалить последний элемент. В этом случае последним элементом будет "обертка".

Спасибо, любая помощь оценили.

		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>
Теги:

1 ответ

1
Лучший ответ

В настоящее время вы добавляете новые сегменты в качестве смежных элементов к первому, без возможности их дифференцирования через класс или идентификатор.

Сначала я рекомендую изменить код, чтобы вы .segment элементы сегментов в другой div и .segment ему класс .segment. Таким образом вы можете использовать document. querySelector document. querySelector для таргетинга последнего .segment класса .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>
Поделиться
  • 0
    Спасибо за ввод, работал очень хорошо, только 1 проблема. Казалось бы, когда я использую кнопку вычитания, он сбрасывает мой форум, как будто он отправлял
  • 0
    Ах, лол, вероятно, потому что я удалил закомментированное предиктор по умолчанию :).
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню