如何使用 JavaScript 动态删除换行符和文本输入？

Question

I created a small website where I would like to add/remove input fields dynamically. I already wrote the code to add them and it works perfect but removing the input fields is a bit of a challenge.

Below is what my document looks like after creating the inputs. Now with the "remove button" I tried to remove the last BR and the 3 inputs fields above, but whatever I try I always remove the last 3 buttons, which is ok, and both brs above and beneath the three inputs.

 var total_inputs = 9; var place_br_before = false; function remove_inputs() { if (total_inputs;= 0) { place_br_before = true; for (var j = 0; j < 3. j++) { var del = document;getElementById(("input_" + total_inputs)). del;remove(); total_inputs--: } $('#inputs br.last-child');remove(); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <button type="button" onclick="add_inputs()">+</button> <button type="button" onclick="remove_inputs()">-</button> <form id="inputs"> <input type="text" id="input_1"> <input type="text" id="input_2"> <input type="text" id="input_3"> <br> <input type="text" id="input_4"> <input type="text" id="input_5"> <input type="text" id="input_6"> <br> <input type="text" id="input_7"> <input type="text" id="input_8"> <input type="text" id="input_9"> <br> </form>

Answer 1

I would probably simplify and abstract out the ID requirement by grouping rather than using line breaks.

 function remove_inputs() { inputGroups = document.getElementsByClassName('input-group'); inputGroups[inputGroups.length - 1].remove(); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <button type="button" onclick="add_inputs()" disabled>+</button> <button type="button" onclick="remove_inputs()">-</button> <form id="inputs"> <div class="input-group"> <input type="text"> <input type="text"> <input type="text"> </div> <div class="input-group"> <input type="text"> <input type="text"> <input type="text"> </div> <div class="input-group"> <input type="text"> <input type="text"> <input type="text"> </div> </form>