Удалить поле формы с помощью Javascript

Поэтому я просмотрел сайт только для того, чтобы не найти ответа на мою конкретную проблему. Я новичок в написании кода и пытаюсь понять, как удалить поле формы после его добавления с помощью Javascript. Вот код. Я был бы очень признателен за отзывы/решения.

var counter = 1;
var limit = 1000;
function addInput(Favorites){
       if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
       }
       else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = "<br>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove'>";
            document.getElementById(Favorites).appendChild(newdiv);
            counter++;

      }

      function removeInput(newdiv){
          document.getElementById('Favorites').removeChild(newdiv);
          counter - 1;
      }
}
  <form>
       <div id="Favorites">
            Favorite 1<input type="text" name="Favorites[]">
       </div>
      <input type="button" value="Add New Favorite" onClick="addInput('Favorites');">
      <input type = "button" value = "Save Changes">
</form>


javascript forms appendchild removechild
person Legendary Elite    schedule 15.03.2017    source источник
comment
для протокола counter - 1, вероятно, делает не то, что вы думаете. Попробуйте использовать counter -= 1 для фактического обновления вашей переменной, иначе counter-- тоже сработает.   -  person stackoverfloweth    schedule 15.03.2017
comment
Основная проблема заключается в том, что с кнопками «Удалить» не связаны никакие события.   -  person imtheman    schedule 15.03.2017

Ответы (2)


arrow_upward
2
arrow_downward

в вашем коде есть различные проблемы, поэтому я немного изменил его. Поэтому используйте следующий код js

var counter = 1;
var limit = 1000;
function addInput(){
   if (counter == limit)  {
        alert("You have reached the limit of adding " + counter + " inputs");
   }
   else {
            var newdiv = document.createElement('div');
            newdiv.innerHTML = " <div class='inputElement'>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove' onClick='removeInput(this)'></div>";
            document.getElementById("Favorites").appendChild(newdiv);
            counter++;
     }
}

function removeInput(removeLink){
   var inputElement = removeLink.parentNode;
  inputElement.remove();
  counter= counter - 1;  
}

В html вы можете немного изменить свой код

 <form>
   <div id="Favorites">
     <div class='inputElement'>   
        Favorite 1<input type="text" name="Favorites[]">
     </div>  
    </div>
      <input type="button" value="Add New Favorite" onClick="addInput();">
     <input type = "button" value = "Save Changes">
</form>

Ознакомьтесь с приведенным выше кодом здесь
https://jsbin.com/hizimateri/1/edit?html,js,console,output

Если у вас есть какие-либо проблемы с ним. Дай мне знать.

person paraS elixiR    schedule 15.03.2017
comment
Спасибо за это, это сработало отлично, хотя пара вопросов, чтобы я мог понять, почему вы сделали то, что сделали 1. Почему вы дали функции removeInput аргумент removelink? и 2. Какова была цель добавления класса к тегу Div? - person Legendary Elite; 16.03.2017
comment
Ответ1. Это работает как ссылка на эту ссылку. Поскольку на этой странице может быть более одной ссылки «удалить». Нажав на одну из них, вы хотите удалить эту конкретную ссылку с родственным полем ввода (не все из них со страницы). Ответ 2. При нажатии кнопки «Удалить» вы должны удалить эту ссылку и ее родственное поле ввода, поэтому здесь я использую родительский контейнер, поэтому теперь мне просто нужно удалить этот родительский div. Надеюсь, поможет! - person paraS elixiR; 16.03.2017
comment
Я думал использовать этот класс в коде, но в настоящее время он бесполезен. - person paraS elixiR; 16.03.2017
comment
Я сделал, но так как у меня меньше 15 представителей, это не отображается публично :/ - person Legendary Elite; 16.03.2017
comment
поскольку вы создали вложенный div, вы должны написать var inputElement = removeLink.parentNode.parentNode;, иначе вы будете оставлять пустой div каждый раз, когда удаляете его (или не создавайте <div class='inputElement'> и просто добавляете класс к созданному элементу var newdiv = document.createElement('div');newdiv.className='inputElement'; - person scraaappy; 16.03.2017

arrow_upward
0
arrow_downward

Может это поможет? Проверьте ссылку здесь ссылка

var counter = 1;
var limit = 2;

    function addInput(Favorites) {
      if (counter == limit) {
        removeInput();
        alert("You have reached the limit of adding " + counter + " inputs");
      } else {
        var newdiv = document.createElement('div');
        newdiv.innerHTML = "<br>Favorite " + (counter + 1) + "<input type='text' name='Favorites[]'><input type ='button' value ='Remove'>";
        document.getElementById(Favorites).appendChild(newdiv);
        counter++;

      }

      function removeInput() {
        var x = document.querySelector('#Favorites div:last-child');
        x.remove();
        --counter;
      }
    }
person Marcelo H. Carneiro    schedule 15.03.2017
comment
Эй, спасибо за ответ, я пытаюсь сделать это с помощью базового Javascript, я запустил предоставленный вами код, и это не помогло решить мою проблему: [ - person Legendary Elite; 15.03.2017
comment
@LegendaryElite, не могли бы вы проверить ссылку на codepen и сказать, нужно ли вам такое поведение, пожалуйста. - person Marcelo H. Carneiro; 15.03.2017
comment
Что вы подразумеваете под поведением? - person Legendary Elite; 16.03.2017
comment
Вы проверили ссылку codepen? Когда счетчик становится двумя, мы предупреждаем и удаляем последний введенный ввод, это то, чего вы пытаетесь достичь? - person Marcelo H. Carneiro; 16.03.2017
comment
Ооо нет, возможно я странно сформулировал вопрос. Моя цель заключалась в том, чтобы заставить функцию удаления работать с базовым Javascript. Например, динамическое добавление и удаление по желанию. - person Legendary Elite; 16.03.2017