как добавлять и удалять строки элементов в javascript

Question

У меня есть такой ряд элементов:

<template>
    <div style="width: 150px; height:60px; overflow:hidden; margin-top:.5%; z-index:999; " >
        <input name="name[]" type="text"  placeholder="Name" style="height:40px; width:250px; border:none; margin-left:800px; position:absolute; border-radius:10px; font-size:20px; z-index:999; " >
        <input name="val[]" type="text"  placeholder="Value" style="height:40px; width:98px; border:none; margin-left:1070px; position:absolute; border-radius:10px; text-align:center; color:#006ca5; font-size:20px; z-index:999; ">
    </div>
</template>

<script>
    function addrow() {
        $(template).attr('id', 'id' + i).appendTo('#appendloc');
        i++;
    };

appendLo c определяется как:

<div id="appendloc">
</div>

круглая кнопка:

Теперь у меня есть круглая кнопка (), которая при нажатии вызывает функцию addrow, с помощью которой я могу добавлять строки шаблона. Но теперь я хочу добавить «-», похожую на круглую кнопку, в каждую строку добавленного шаблона, который при нажатии удаляет соответствующую строку. Кажется, мне, возможно, придется сохранить каждую строку по индексу, чтобы можно было удалить определенную строку c. Кто-нибудь может предложить мне go? Я изучаю javascript, так что буду признателен, если эксперт прокомментирует это.

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

Answer 1

Я не специалист, но могу попробовать дать решение. Попробуйте код, приведенный ниже. Соответствующая строка будет удалена при нажатии кнопки «-».

function boxrem() {
  $(this).closest("template").remove();
}

Если вы используете sh, чтобы повторно вставить удаленный элемент позже, используйте .detatch () вместо .remove ()