DOM, удалить дочерний узел

205

23 марта 2018, 11:29

Надо добавлять и удалять узлы в div. Добавлять могу а удалять нет. Пишет это не родитель.

var inputs = document.getElementsByTagName('form')[0]; 
 
var cloneInp; 
 
function iff() { 
  cloneInp = inputs[2].cloneNode(true); 
  inputs[2].after(cloneInp) 
} 
 
function remov() { 
  inputs.removeChild(inputs[0]); 
}

<form> 
  <input type="text" name="First" value="First Name"> 
  <input type="text" name="Last" value="Last Name"> 
  <div class="phones"> 
    <input type="text" name="Telephone" value="Telephone"><br> 
    <input type="text" name="Telephone" value="Telephone"> 
  </div> 
  <br> 
  <input type="submit" name="" value="Add"> 
</form>

Answer 1

С одной стороны вы берете элементы формы по индексу. Таким образом перебираются все функциональные элементы формы input, кнопки и тд. А с другой стороны они не все являются прямыми детьми DOM формы. Потому что у вас там внутри формы div, а в нём 2 вложенных input.

Поэтому нужно удалять узлы, определив сначала их 'DOM' родителя. inputs[0].parentElement.removeChild(inputs[0]); Ну либо сделайте формы без вложенных div.

var inputs = document.getElementsByTagName('form')[0]; 
 
var cloneInp; 
 
function iff() { 
  cloneInp = inputs[2].cloneNode(true); 
  inputs[2].after(cloneInp) 
} 
 
function remov() { 
  inputs[0].parentElement.removeChild(inputs[0]); 
}

<form> 
  <input type="text" name="First" value="First Name"> 
  <input type="text" name="Last" value="Last Name"> 
  <div class="phones"> 
    <input type="text" name="Telephone" value="Telephone"><br> 
    <input type="text" name="Telephone" value="Telephone"> 
  </div> 
  <br> 
  <input type="submit" name="" value="Add" disabled> 
</form> 
<br/> 
<button onClick="iff();">Дублировать третий узел</button> 
<button onClick="remov();">Удалить первый узел</button>

Если вам надо работать с элементами внутри div, то тогда вот такой пример.

var mydiv = document.getElementsByTagName('form')[0].getElementsByTagName('div')[0]; 
var cloneInp; 
 
function iff() { 
  elem=mydiv.getElementsByTagName('*')[2]; 
  if (elem!=undefined) { 
    cloneInp = elem.cloneNode(true); 
    elem.after(cloneInp) 
  } 
} 
 
function remov() { 
  elem=mydiv.getElementsByTagName('*')[0]; 
  if (elem!=undefined) { 
    mydiv.removeChild(elem); 
  } 
   
}

<form><!-- 
  --><input type="text" name="First" value="First Name"><!-- 
  --><input type="text" name="Last" value="Last Name"><!-- 
  --><div class="phones"><!-- 
  --><input type="text" name="Telephone1" value="Telephone"><!-- 
  --><input type="text" name="Telephone2" value="Telephone2"><!-- 
  --><input type="text" name="Telephone3" value="Telephone3"><!-- 
  --></div><!-- 
  --><br><!-- 
  --><input type="submit" name="" value="Add" disabled><!-- 
--></form> 
<br/> 
<button onClick="iff();">Дублировать третий узел</button> 
<button onClick="remov();">Удалить первый узел</button>

Answer 2

Узлы можно удалять очень просто, используя функцию Node.remove()

var el = document.getElementById("id1");
el.remove();

Родителя извлекать и знать не обязательно.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему не работает iframe?

216

HTML

Приходит сообщение с пустым файлов

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

221

HTML

Связка формы со слайдером

Ребята подскажите как можно связать форму со слайдером?Чтобы в письме на почту приходили контактные данные из формы + имя из слайдера(в слайдере...

235

HTML

Проблема с выпадающим меню [требует правки]

Есть меню:

323