动态添加和删除选择框

我尝试用动态添加和删除值来编写选择框。我可以添加值,但不幸的是我不能删除它。这是代码;

<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>

$(".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();
        });

我太努力了,现在我的代码什么都没有了。