空白输入提交空白li在ul由jquery

Question

每次我在输入中输入新值并在提交时输入。它在ul中添加并且输入变为空白但是当我单击空白输入时它还在ul中添加空白li我该怎么解决它。

这是代码

<form>
    <input type="text" id="addList">
    <input type="button" id="submit" value="Add">
</form>

<ul id="listItem"></ul>

jquery的

    $(function (){
    $('#submit').click(function(){
        var $item = $('#addList').val();
        $('ul#listItem').append('<li>'+ $item + '</li>');
        $item = $('#addList').val(' ');
    });
});

Answer 1

我无法看到您的代码，但我想您不希望提交任何未定义的值。

只检查空输入;

if ($("#yourinput").val != "") myFunc(somevar);

如果您要求正确答案，请提供您的代码而不是图片。

Answer 2

添加not empty condition if($item !='')

$(function (){
    $('#submit').click(function(){
        var $item = $('#addList').val();
        if($item.trim() !='')
        {
        $('ul#listItem').append('<li>'+ $item + '</li>');
        $item = $('#addList').val(' ');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" id="addList">
    <input type="button" id="submit" value="Add">
</form>

<ul id="listItem"></ul>

Answer 3

$("#addbtn").on("click",function(){
val = $("#lival").val();
if(val.trim() == ''){
	alert("Please enter valid input!")
}else{
html= "<li>"+val+"</li>";
 $("#ulid").append(html);
 $("#lival").val('') ;
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="lival"><button id="addbtn">Add</button>

<ul id="ulid">
  
</ul>

jsfiddle：https://jsfiddle.net/nbd5jjdx/