javascript - 为什么我的元素没有被清空？

我敢肯定这很简单，但是我被卡住了。

我有一个输入，当输入值时，我想将此值附加到<span>元素。从输入中删除该值后，我还要从<span>元素中将其删除。

我遇到的问题是输入值已删除，但是html'Name'仍然保留。

Fiddle link。

<input type="search" id="searchName" type="text">
<div id="searchFilter">
  <p><span id="filterName"></span></p>
</div>

$('#searchName').keyup(function() {
  if ($('#searchName').length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

任何帮助表示赞赏。

最佳答案

计算val()的长度，而不是元素本身：

$('#searchName').keyup(function() {
  if ($('#searchName').val().length > 0) {
    $("#filterName").text('Name: ' + $('#searchName').val());
  } else {
    $("#filterName").empty();
  }
});

Fiddle