Динамически добавлять / удалять текстовые поля JQUERY - PullRequest
0 голосов
/ 05 августа 2020

Я пытаюсь создать форму, которая позволяет пользователю вводить серию электронных писем, динамически добавляя новое текстовое поле. Я следил за этой реализацией здесь, которая хорошо работает: https://stackoverflow.com/questions/34748659/dynamically-add-and-remove-textboxes-and-get-value-of-dynamic-textbox-using-jque

Единственное изменение, которое я сделал, из-за которого кнопка «удалить» внезапно перестала работать, это добавление метки между полями ввода, как показано ниже:

jQuery(document).ready( function () {

        $("#append").click( function(e) {
          e.preventDefault();
          
          
          var urlParams = new URLSearchParams(window.location.search);
          var domain = urlParams.get('domain');
          //console.log(domain);
         
         // document.getElementById('domain').innerHTML = domain;
          
        $(".inc").append(`<div class="controls">\
                <input class="form-control" type="text" id="email" name="email" placeholder="email">\
                <labe>@</label>\
                <input class="form-control" type="text" id="domain" name="domain" disabled="disabled" value="${domain}">\
                <a href="#" class="remove_this btn btn-danger">remove</a>\
                <br>\
                <br>\
                <br>\
            </div>`
           
            );
        return false;
        });

    jQuery(document).on('click', '.remove_this', function() {
        jQuery(this).parent().remove();
        return false;
        });
    $("input[type=submit]").click(function(e) {
      e.preventDefault();
      $(this).next("[name=textbox]")
      .val(
        $.map($(".inc :text"), function(el) {
          return el.value
        }).join(",\n")
      )
    })
    
    
  });
  

Проблема в том, что кнопка «удалить» теперь удаляет только:

<labe>@</label>\
                <input class="form-control" type="text" id="domain" name="domain" disabled="disabled" value="${domain}">\

при выходе из первого текстового поля:

<input class="form-control" type="text" id="email" name="email" placeholder="email">\
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...