javascript - 动态添加和删除的选择框

Question

我尝试编写具有动态添加和删除值的选择框。我可以添加值，但不幸的是我无法删除它。这是代码；

<ul class="subscribe" style="text-align: center;">
    <li class="container-box">
        <span class="input-text">name</span>
        <input type="text" name="name-surname" id="add-name" class="adding-name" style="color: #000;"/>
    <li class="container-box">
        <span class="input-text">birth day</span>
        <select name="day" id="day">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
        </select>
        <select name="month" id="month">
                <option value="september">September</option>
                <option value="october">october</option>

        </select>
        <select name="year" id="year">
                <option value="2016">2016</option>
                <option value="2018">2018</option>
                <option value="2017">2017</option>
        </select>
    </li>
    <li>
        <button class="adding-selectbox">add</button>
    </li>
    <li class="adding-b-day">
    </li>
</ul>

Javascript

$(".adding-selectbox").on('click', function(event) {
        event.preventDefault();
        var getvalue = $("#add-name").val();
        var babyDay = $("#day").val();
        var babyMonth = $("#month").val();
        var babyYear = $("#year").val()
        var allBabyValues = getvalue + " / " + babyYear + "-" + babyMonth + "-" + babyDay;
        $('.adding-b-day').append("<div class='select-element'><select name='child-name[]' id='select-attrs'><option value="+ allBabyValues +">"+allBabyValues +"</option></select></div>");
        $('.select-element').append('<span class="delete-selectbox">x</span>');
    });
    $(".delete-selectbox").on("click", function() {
            var select = $(".select-element");
                select.remove();
        });

我很努力，但我的代码此时毫无进展。我只想让每个添加按钮都提供新的选择和新的选项，并且它必须是可删除的。你会建议我做什么？谢谢...

Answer 1

绑定(bind)监听器以在 BODY 上删除，而不是在按钮本身上删除，因为在绑定(bind)时按钮不存在。当您绑定(bind)到主体时，即使该元素是稍后添加的，它也会起作用。

改变

$(".delete-selectbox").on("click", function() {

至

 $("body").on("click", '.delete-selectbox',function() {