добавление и удаление (определенных) элементов формы с использованием JavaScript - PullRequest
Новая
       27

добавление и удаление (определенных) элементов формы с использованием JavaScript

0 голосов
/ 20 июня 2011

У меня есть текстовая область, а рядом с ней две кнопки: «добавить другую текстовую область» и «удалить эту текстовую область»

вот мой HTML-код: 

<div id="summaryIn">
                            <label for="">Summary of Experience:</label> 
                            <textarea class="TA1" name="mySummary[]" value=""></textarea>
                            <button class="adddel" name="cmdDelSummary[]" id="cmdDelSummary" title="Delete this Summary" onClick="DelSummary('summaryIn');">-</button> 
                            <button class="adddel" id="cmdAddSummary" title="Add Another Summary" onClick="AddSummary('summaryIn');">+</button>
                        </div>

моя функция JavaScriptдобавление текстовой области работает нормально, однако кнопка удаления не работает, вот код javascript: 

function DelSummary(divName){
alert(summary_counter);
if (summary_counter == 1)
{
    document.getElementById('cmdDelSummary').disabled=true;
}
else
{
    summaryIn.removeChild(summaryIn.lastChild);
    summary_counter--;
    //alert(summary_counter);
}

}

Я пытался выяснить это довольноДавно, но до сих пор я не нашел никакого решения.,Я не знаю, как индексировать / ссылаться на дополнительные кнопки удаления, чтобы removeChild удалял только эту конкретную текстовую область, а не всегда lastChild. Заранее большое спасибо:)

Ответы [ 2 ]

1 голос
/ 20 июня 2011

Я думаю, вы должны добавить 

summaryIn = document.getElementById(divName);

до 

summaryIn.removeChild(summaryIn.lastChild);
0 голосов
/ 20 июня 2011

Эта строка: 

summaryIn.removeChild(summaryIn.lastChild);

, кажется, зависит от практики преобразования имен и идентификаторов элементов в глобальные переменные, которые ссылаются на элемент.Это нестандартная практика, которая реализована не всеми браузерами.

Вместо этого используйте соответствующие стандартам: 

var  summaryIn = document.getElementById('summaryIn');

Теперь вы можете вызвать его метод removeChild .Вам, вероятно, следует проверить, что вы собираетесь удалить, поскольку изначально кнопка «Добавить еще одну сводку» является последним дочерним элементом.

Редактировать

По договоренности имена функций начинаются сзаглавная буква зарезервирована для cosntructors, поэтому я использовал нижний регистр.

Чтобы удалить div и его содержимое из документа: 

// Go up DOM until reach parent element with tagName
// If no such node found, return undefined.
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el.parentNode) {
    el = el.parentNode;

    if (el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }
}

function delSummary(el){
  var div = upTo(el, 'div');
  div.parentNode.removeChild(div);
}

И назвать его так: 

  <button ... onclick="delSummary(this);" ...>-</button>

Хотя имена атрибутов HTML не чувствительны к регистру, я считаю, что использование верблюжьего регистра делает их трудными для чтения и поэтому использует строчные буквы.

...