如果提交的字段为空，则阻止添加/附加输入类型=“按钮”

Question

我有这个简单的html项目，从输入的字段中添加列表

<div class="container">
    <input id="list-input" />
    <button id="add">Add To List</button>
</div>
<div class="container">
    <h1>Your List</h1>
    <ul id="mylist">

    </ul>
    <button id="clear">clear</button>
</div>

以下是我在添加列表

中管理jquery的方法

$('document').ready(function(){
    //add to list function
    $('#add').click(function(){
        var newToList = $('#list-input').val();

        $('#mylist').append('<li id="item">' + newToList  + '<button id="remove"/></button>' + '</li>');

        if(newToList == ""){
            alert("Please input some list to do");
        }
        //clear input field
        $('#list-input').val('');
    });

});

每次我提交一个空字段时，都会返回一个警报但是我追加的按钮仍会显示。有没有办法在如何通过旁边的按钮追加字段值，如果字段为空它不会显示字段值和旁边的按钮？

Answer 1

警告后返回false。

$('#add').click(function(){
    var newToList = $('#list-input').val();

   if(newToList == ""){
        alert("Please input some list to do");
         return false;
    }
    $('#mylist').append('<li id="item">' + newToList  + '<button id="remove"/></button>' + '</li>');



    //clear input field
    $('#list-input').val('');

});