Javascript jQuery：将项附加到列表中时，仅显示一项

您好，我有一个按钮，可将项目添加到列表中，
选择某个项目时，所有其他项目都将隐藏，并且仅显示选定的项目

目标：
我想要的是只显示“最后一个”附加项。
当前，列表中显示了所有最近添加的项

jQuery将项追加到列表中：

//AppendImagePreview
$(function() {
    var itemCount = 1;
$("#addImageButton").click(function(e) {  
    e.preventDefault();
    var itemCount = ($("[id^='item-']").length + 1);

var elementPreview = $("<li id='item-" + itemCount + "'></li>");

 $("#cardList").append(elementCard);
  $("#previewList").append(elementPreview);
    });
});

列表附加位置：

<ul id="previewList" class="previewList">
    <li></li>
</ul>

您可以将最后一个附加项放入全局变量中

var lastAppendedId;
$(function() {
    var itemCount = 1;
    $("#addImageButton").click(function(e) {  
        e.preventDefault();
        var itemCount = ($("[id^='item-']").length + 1);

        var elementPreview = $("<li id='item-" + itemCount + "' class ='listItem'></li>");
        lastAppendedId = elementPreview.attr('id');
        $("#cardList").append(elementCard);
        $("#previewList").append(elementPreview);
    });
});

jsfiddle：

var lastAppendedId;
$(function() {
    var itemCount = 1;
    $("#addImageButton").click(function(e) {  
        e.preventDefault();
        var itemCount = ($("[id^='item-']").length + 1);

        var elementPreview = $("<li id='item-" + itemCount + "' class ='listItem'></li>");
        lastAppendedId = elementPreview.attr('id');
        $("#cardList").append(elementCard);
        $("#previewList").append(elementPreview);
    });
});

$('.listItem').each(function() {
  var currentId = this.id;
  if(currentId !== lastAppendedId) {
    $(this).hide();
  }
);