Как найти все input поля и очистить при клонировании Node?

Question

[Chvalov]

Есть код - сделал демку

Как лучше удалять весь текст с input полей при клонировании елемента ?
Или лучше будет вставлять новый div елемент ?

Вот как хотелось бы, но вариант не подходит в данной ситуации:(

clone.getElementsByTagName('input').each(function(){
     $(this).val('');
});

Из рабочих вариантов:
Гавно код:

clone.getElementsByTagName('input')[0].value = '';
clone.getElementsByTagName('input')[1].value = '';

Вариант получше, но хочется меньше кода

for (i = 0; i < clone.getElementsByTagName('input').length; i++) {              // LOOP THROUGH EACH ELEMENT.
        if (clone.getElementsByTagName('input')[i].type == 'text') {                // CHECK THE ELEMENT TYPE.
            clone.getElementsByTagName('input')[i].value = '';
        }
    }

Также подскажите как избежать удаления последнего элемента

Answer 1

[0xD34F]

Как лучше удалять весь текст с input полей при клонировании елемента ?

Не надо ничего удалять. Можно изначально сделать копию пустой строки, и копировать её при добавлении новой .form-row, а не один из элементов, которые присутствуют в #BodyForm.

подскажите как избежать удаления последнего элемента

Очевидно же: проверяете количество элементов при вызове функции удаления - если остался 1, ничего не делаете.

Или, если под последним вы понимаете не последний оставшийся, а последний по своему положению внутри #BodyForm - тоже очевидно: получаете последний элемент в функции удаления и сравниваете его с удаляемым, если равны, ничего не делаете.

Исправлено

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<div id="BodyForm">
  <div class="form-row form-row-data">
    <div class="form-group col-sm-3">
      <input type="text" class="form-control" placeholder="Name">
    </div>
    <div class="form-group col-sm">
      <input type="text" class="form-control" placeholder="Value">
    </div>
    <div class="form-group col-sm-auto">
      <button type="button" class="btn btn-secondary btn-block" onclick="delRow(this)">
        <em class="fa fa-minus"></em>
      </button>
    </div>
  </div>

  <div class="form-row justify-content-end">
    <div class="col-sm-4">
      <button type="button" class="btn btn-outline-success btn-block pull-right" onclick="addRow()">
        <i class="fa fa-plus"> Add</i>
      </button>
    </div>
    <div class="col-sm-4">
      <button type="button" class="btn btn-outline-danger btn-block pull-right">
        <i class="fa fa-trash"> Clear all</i>
      </button>
    </div> 
  </div>
</div>

const form = document.querySelector('#BodyForm');
const rows = form.getElementsByClassName('form-row-data');
const row = rows[0].cloneNode(true);
const footer = form.querySelector('.justify-content-end');

const addRow = () => footer.before(row.cloneNode(true));
const delRow = el => rows.length > 1 && el.closest('.form-row-data').remove();

Comments

[Chvalov]

0xD34F странно поместил js код себе
и получаю ошибку:
Cannot read property 'cloneNode' of null
Поместил код в $(document).ready(function() { и один фиг таж ошибка

[Chvalov]

JS подключаю в футере

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="assets/js/my.js"></script>

[0xD34F]

Chvalov, ну, не найден элемент, querySelector вернул null. Может, потому что у элемента с input'ами отсутствует класс form-row-data? - я его в вашей демке добавил, чтобы можно было отличить строки с данными от строки с кнопками add и clear. Т.е. надо не только js подправить, но и html.

[Chvalov]

0xD34F, я что то не обратил внимание на то что добавили новый класс и отредактированное название события onclick на кнопке удаления, теперь все супер

Большое спасибо !