Как лучше удалять весь текст с 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 row = document.querySelector('.form-row-data').cloneNode(true);
function addRow() {
form.insertBefore(row.cloneNode(true), form.querySelector('.justify-content-end'));
}
function delRow(el) {
if (document.querySelectorAll('.form-row-data').length > 1) {
form.removeChild(el.closest('.form-row-data'));
}
}
