使用每行上的删除按钮动态创建表单行并在每行上选择选项 - JQUERY

Question

我正在尝试创建一个设计，在该设计中我需要动态创建一个带有删除按钮的表单行。

基本要求-

1. 每一行都有一个选择下拉菜单，该下拉菜单是在添加行时从静态数组填充的。
2. 所有下拉菜单都有相同的选项集。
3. 每一行都有一个删除按钮，点击它会删除整行

设计

当前实施

HTML

<div id="ec-loanTypeContainer">
    <div id="ec-add-loan-wrapper">
        <div class="row select-row ec-border">
            <div id="ec-loan-type" class="col-md-4 mb-5 mb-md-0">
                <p class="ec-loan-type-label">Loan Type</p>
                <select class="form-select form-control ec-loan-type" id="ec-loan-type-dropdown"
                                aria-label="Default select example">
                    <option class="ec-option-placeholder" value="" disabled selected>Select Loan Type
                                </option>
                </select>
            </div>
            <div class="col-md-4">
                <p>Monthly Installment (SGD)</p>
                <div class="form-group mt-2">
                    <input type="text" class="ec-form-control" id="ec-monthly-installment"
                                  aria-describedby="emailHelp" placeholder="E.g. 12,345.00" />
                </div>
            </div>
            <div class="col-md-4">
                <p>Outstanding Amount (SGD) </p>
                <div class="form-group mt-2">
                    <input type="text" class="ec-form-control" id="ec-outstanding-amount"
                                  aria-describedby="emailHelp" placeholder="E.g. 12,345.00" />
                </div>
            </div>
        </div>
    </div>

Javascript/Jquery

const optionItems = [{
    value: "EX1",
    text: "Example1"
}, {
    value: "EX2",
    text: "Example2"
}, {
    value: "EX3",
    text: "Example3"
}]

//Append a row of select and input on click of add button
$('#ec-add-another-loan').on("click", function() {
    if (count <= 10) {
        $('#ec-add-loan-wrapper').append('<div class="row ec-select-row ec-border"><div class="col-md-4 mb-5 mb-md-0"><select name="ec-loan-type[]" class="form-select form-control ec-loan-type" aria-label="Default select example"><option class="ec-option-placeholder" value="" disabled selected>Select Loan Type</option></select></div><div class="col-md-4"><div class="form-group mt-2"><input type="text" name="ec-monthly-installment[]" class="ec-form-control" aria-describedby="emailHelp" placeholder="E.g. 12,345.00" /></div></div><div class="col-md-4"><div class="form-group mt-2 ec-outstanding-amount-container"><input type="text" class="ec-form-control" aria-describedby="emailHelp" placeholder="E.g. 12,345.00" /><img src="../iwov-resources/assets/icons/icon-delete.svg"  class="redTip img-fluid ec-delete-icon"/></div></div> </div > ')
        count++;
    }

    //Append options dynamically
    $.each(optionItems, function(i, item) {
        $("select[name=ec-loan-type[" + count + "]]").append($('<option>', {
            value: item.value,
            text: item.text,
        }));
    });
});

//Delete the row on click of the delete icon
$('.ec-delete-icon').click(function() {
    console.log("fsfssfsf", this)
    $(this).parent().remove();
});

当前的代码问题

1. 无法弄清楚如何动态填充选择下拉列表
2. 无法弄清楚如何找到特定行的删除图标并删除该行。

如果有人可以帮助解决这个问题，那就太好了。

Answer 1

删除图标事件侦听器应委托给始终存在的更高级别元素。您当前的版本仅适用于该代码运行时存在的版本，但不考虑将来添加到 DOM 中的版本

另外 parent() 在树中不够高...使用 closest() 一直到行

$('#ec-add-loan-wrapper').on('click', '.ec-delete-icon', function(){
     $(this).closest('.row').remove();
});

Understanding Event Delegation

Answer 2

能够通过按名称获取所有选择然后在每次添加行单击时将选项附加到选择数组的最后一个索引来进行动态附加。

    //Append a row of select and input on click of add button
    $('#ec-add-another-loan').on("click", function() {
        if (count < 10) {
            $('#ec-add-loan-wrapper').append('<div class="row ec-select-row ec-border"><div class="col-md-4 mb-5 mb-md-0"><select name="ec-loan-type" class="form-select form-control ec-loan-type" aria-label="Default select example"><option class="ec-option-placeholder" value="" disabled selected>Select Loan Type</option></select></div><div class="col-md-4"><div class="form-group mt-2"><input type="text" name="ec-monthly-installment[]" class="ec-form-control" aria-describedby="emailHelp" placeholder="E.g. 12,345.00" /></div></div><div class="col-md-4"><div class="form-group mt-2 ec-outstanding-amount-container"><input type="text" class="ec-form-control" aria-describedby="emailHelp" placeholder="E.g. 12,345.00" /><img src="../iwov-resources/assets/icons/icon-delete.svg"  class="redTip img-fluid ec-delete-icon"/></div></div> </div > ')
            count++;
        }


        const selectIndex = $("select[name='ec-loan-type']").length - 1;
        let currentSelect = $("select[name='ec-loan-type']")[selectIndex];


        $.each(optionItems, function(i, item) {
            var option = $("<option value = " + item.value + ">" + item.text + "</option>")[0];
            currentSelect.append(option);
        });



        values = $("select[name='ec-loan-type']")
            .map(function() {
                return $(this).val();
            }).get();
        console.log("addaadad", values)
        return false;
    });