列表项上的Ajax jquery转换高度

Question

我想做一个动态列表，其中包含一些用ajax加载的项目。

我有我的项目清单，我想展示＆amp;隐藏其中一个高度过渡。我不知道如何清理我的清单。我从jQuery尝试.empty（），但它没有用。

见这里：http://i.stack.imgur.com/zFVYn.jpg

我的代码示例：http://codepen.io/anon/pen/PGJQgk

// load list items
$.getJSON(
    "https://jsonplaceholder.typicode.com/users",
    function(data) {
        // list of items
        for (var i = 0; i < 2; i++) {
            $('.items').append('<div class="item" id="' + data[i].id + '">' + data[i].name + ' <br>Click me</div>');
        }
    }
);

// load item on click
$('.items').on('click', '.item', function(e) {
    // id of the selected item
    var id = $(this).attr('id') - 1;
    // height of the item box - can be different with mobile devive
    var heightOfItem = $(this).height();
    $('.background').css({
        'height': '' + heightOfItem + ''
    });

    // insert selected item
    $.getJSON(
        "https://jsonplaceholder.typicode.com/users",
        function(data) {
            $('.showClickedItem').append('<div class="item" id="' + data[id].id + '">' + data[id].name + '</div>')
        }
    );
});