javascript - 使用每行上的删除按钮动态创建表单行并在每行上选择选项 - 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

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

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

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

Understanding Event Delegation