Удаление текстового поля с помощью Javascript

Question

У меня есть следующий код для добавления текстовых полей, когда функция вызывается:

<span id="response"></span> 
     <script> 
     var qcountBox = 2; 
     var acountBox = 2; 
     var qboxName = 0; 
     var aboxName = 0; 
     function addInput() 
     { 
      var qboxName="question"+qcountBox; 
      var aboxName="answer"+acountBox; 
      if(qcountBox <=10 && acountBox <= 10) 
       { 
       document.getElementById('response').innerHTML+='<br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/>'; 
       document.getElementById('response').innerHTML+='<br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/>'; 
       qcountBox ++; 
       acountBox ++; 
      }else 
      alert("No more than 10 questions allowed at this time."); 
     } 

Я также хотел бы иметь возможность добавить функцию, чтобы удалить любые новые поля я добавил , Какие-либо предложения? Спасибо

Answer 1

Окружать каждый новый кусок HTML в пролете с общим именем класса. Затем найдите все объекты с этим именем класса и удалите их.

Добавить продолжительность и имя класса для них:

document.getElementById('response').innerHTML+='<span class="added"> <br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/></span>'; 
document.getElementById('response').innerHTML+='<span class="added"><br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/></span>'; 

Затем, вы можете удалить все добавленные пролеты, как это:

var items = document.getElementsByClassName("added"); 
for (var i = 0; i < items.length; i++) { 
    items[i].parentNode.removeChild(items[i]); 
} 

Примечание: Это вообще лучший способ добавить свой новый HTML, поскольку он не переписывает весь предыдущий HTML-код: он просто добавляет новые объекты DOM:

var span = document.createElement("span"); 
span.className = "added"; 
span.innerHTML = '<br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/><br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/>'; 
document.getElementById('response').appendChild(span); 

Answer 2

<script> 
     var qcountBox = 1; 
     var acountBox = 1; 
     var qboxName = 0; 
     var aboxName = 0; 
     function addInput() 
     { 
      var qboxName="question"+qcountBox; 
      var aboxName="answer"+acountBox; 
      if(qcountBox <=10 && acountBox <= 10) 
       { 
       document.getElementById('response').innerHTML+='<div id="'+qcountBox+'"><br/>Question '+qcountBox+': <input type="text" name="'+qboxName+'"/>'; 
       document.getElementById('response').innerHTML+='<br/>Answer '+acountBox+': <input type="text" name="'+aboxName+'"/><br/></div>'; 
       qcountBox ++; 
       acountBox ++; 
      }else 
      alert("No more than 10 questions allowed at this time."); 
     } 
     function removeInput(id) 
     { 
      document.getElementById(id).innerHTML = ''; 
     } 

Вы можете удалить любой вопрос, который был добавлен, используя идентификатор вопроса DIV (такой же, как qboxName)

Answer 3

Вы должны фактически создать элемент ввода в JavaScript и добавить его в контейнер через appendChild вместо использования innerHTML +=.

Вы также должны установить идентификатор для этих полей, а не только имя. Но это может быть то же самое, что и их имена.

Как это

var input = document.createElement("input"); 
input.type = "text"; 
input.name = input.id = qboxName; 
document.getElementById("response").appendChild(input); 

И потом, вы знаете, сделать то же самое для другого поля ввода вам нужно. Я знаю, что вам нужна текстовая метка для ящиков или что-то еще, просто выполните тот же процесс, чтобы вставить тег span перед ними.

Кроме того, я не вижу причины для этих двух переменных подсчета. Вместо qcountBox и acountBox вполне возможно иметь только одну переменную подсчета. Может быть, я ошибаюсь, но разве вы не должны увеличивать этот счет до установки имен ящиков?

Что касается его удаления, вы можете использовать метод removeChild, а затем уменьшить свою счетную переменную. как это:

function removeInput() 
{ 
    var qboxName = "question" + count; 
    var aboxName = "answer" + count; 
    document.getElementById("response").removeChild(document.getElementById(aboxName)); 
    document.getElementById("response").removeChild(document.getElementById(aboxName)); 
    count--; 
} 

Может быть, если вы собираетесь вставлять другие элементы вместе с этими полями, как пролетных теги для этикеток и т.д., было бы лучше, чтобы обернуть их все в DIV или что-то, то просто сделать a removeChild только этому контейнеру.