Как удалить последний элемент, созданный динамически?

Question

[Александр Валутин]

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

<div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <H2>Исправительная форма</H2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="main"></div>
                <button type="button" id="btn">Добавить</button>
                <button type="button" id="del_btn">Удалить</button>

{literal}
                    <script type="text/javascript">
                        rows = 0;
                        addRow();
                        btn.addEventListener('click', addRow);
                        del_btn.addEventListener('click', deleteRow);
                        function deleteRow() {
                            if (rows != 1 && rows <= 5) {
                                rows--;
                                divElement = document.getElementById('divsf');
                                divElement.parentNode.removeChild(divElement);
                            }
                        }
                        function addRow() {
                            if (rows < 5) {
                                rows++;
                                $('#main').append(_makeRow());
                            } else {
                                alert('ХВАТИТ');
                            }
                        }
                        function _makeRow() {
                            return `
              <div class="row" id="divsf">
               <div class="col-sm-2">
                <div class="form-group">
                    <label>Признак<br>записи: </label>
                    <select name="sign_record" class="form-control">
                        <option value="main_fix">Основаная</option>
                        <option value="additional_fix">Допполнительная</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>регистрации:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="registration_date" type="text"  name="registration_date_fix">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Номер<br/> исправления:</label>
                    <input type="text" class="form-control input-sm" name="number_fix">
                </div>
            </div>
            <div class="col-sm-1">
                <div class="form-group">
                    <label>Дата<br/>исправления:</label>
                    <div class="form-group">
                        <input  class="form-control input-sm"
                                id="correction_date_fix" type="text"  name="correction_date_fix">
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Сумма:</label>
                    <input type="text" class="form-control input-sm" name="sum_fix">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <label>Услуга</label>
                    <input type="text" class="form-control input-sm" name="service_fix">
                </div>
            </div>
        </div>
`}
                    </script>
                {/literal}
            </div>

Answer 1

[Sashqa]

let elems = document.querySelectorAll('.uniqueClass') // проходимся по всем строкам с классом uniqueClass
let el = elems[elems.length - 1] // получаем последний
el.parentNode.removeChild(el); // удаляем последний

Кстати, вы заметили, что при добавлении новых строк они добавляются с одним и тем же Id? - это не верно
лучше сделайте класс

Answer 2

[Александр Валутин]

Всем спасибо, решил так:

function deleteRow() {
                            if (rows != 1 && rows <= 5) {
                                $('#divsf.row').last().remove();
                                rows--;
                            }
                        }

Comments

[Sashqa]

это не верное решение

[Александр Валутин]

Работает же) хотя спорить не буду, возможно оно работает некорректно