Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Удалить последнее поле (https://javascript.ru/forum/misc/46138-udalit-poslednee-pole.html)

kowapos 30.03.2014 03:39

Удалить последнее поле
 
Всем привет. вот, запилил скрипт который добавляет новые поля, все работает, но хочу сделать функцию, которая по клике на кнопку удаляет последнее поле. подскажите. так же хочется услышать объективную критику. спасибо

<form>
	<input type = "text">
	<span id = "NewFields"></span>
	<br> <input name = "MyField" type = "button" value = "+" onclick = 'CreateFormElement()'>
</form>


function CreateFormElement(){
    
  var MyForm = document.getElementById('NewFields');
  var input = document.createElement('input');
  var br = document.createElement('br');

  input.type = 'text';
  input.name = 'MyField';

  MyForm.appendChild(br);
  MyForm.appendChild(input);
}





ps: как оформить пост, что бы этот скрипт запустился?

jsnb 30.03.2014 04:04

function removeLastField() {
  var fieldsSpan = document.getElementById('NewFields');
  var lastField = fieldsSpan.lastChild;
  if (!lastField) return;
  fieldsSpan.removeChild(lastField); //удаляем поле
  var br = fieldsSpan.lastChild;
  fieldsSpan.removeChild(br); //удаляем br
}

рони 30.03.2014 04:11

[HTML run]<form>
	<input type = "text">
	<span id = "NewFields"></span>
	<br> <input name = "MyField" type = "button" value = "+" onclick = 'CreateFormElement()'>
     <input name = "MyField" type = "button" value = "-" onclick = 'CreateFormElement(true)'>
</form>
<script>
   function CreateFormElement(remove){
  var MyForm = document.getElementById('NewFields');
  var input = remove ? MyForm.querySelector(':nth-last-child(1)') : document.createElement('input');
  var br = remove ? MyForm.querySelector(':nth-last-child(2)') : document.createElement('br');

    var ap = remove ? "removeChild" : "appendChild"
 if(br)MyForm[ap](br);
  if (input){input.type = 'text';
  input.name = 'MyField';MyForm[ap](input);
}
}
</script>[/HTML]


<form>
	<input type = "text">
	<span id = "NewFields"></span>
	<br> <input name = "MyField" type = "button" value = "+" onclick = 'CreateFormElement()'>
     <input name = "MyField" type = "button" value = "-" onclick = 'CreateFormElement(true)'>
</form>
<script>
   function CreateFormElement(remove){
  var MyForm = document.getElementById('NewFields');
  var input = remove ? MyForm.querySelector(':nth-last-child(1)') : document.createElement('input');
  var br = remove ? MyForm.querySelector(':nth-last-child(2)') : document.createElement('br');

    var ap = remove ? "removeChild" : "appendChild"
 if(br)MyForm[ap](br);
  if (input){input.type = 'text';
  input.name = 'MyField';MyForm[ap](input);
}
}
</script>

kowapos 30.03.2014 04:20

всем спасибо )))

jsnb 30.03.2014 04:30

Цитата:

Сообщение от рони (Сообщение 305090)
function CreateFormElement(remove){
  var MyForm = document.getElementById('NewFields');
  var input = remove ? MyForm.querySelector(':nth-last-child(1)') : document.createElement('input');
  var br = remove ? MyForm.querySelector(':nth-last-child(2)') : document.createElement('br');
 
  input.type = 'text';
  input.name = 'MyField';
  var ap = remove ? "removeChild" : "appendChild"
  MyForm[ap](br);
  MyForm[ap](input);
}

При пустом спане при удалении эксепшн будет.

рони 30.03.2014 09:52

jsnb,
добавил проверку в код выше


Часовой пояс GMT +3, время: 09:00.