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

绑定侦听器以在BODY而不是按钮本身上进行删除，因为在绑定时该按钮不存在。当您绑定到主体时，即使以后添加了该元素，它也可以正常工作。

更改

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

到

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

选择带有动态添加和删除框

1 个答案: