从屏幕上异步删除JSON对象

Asynchronously remove JSON object from screen

本文关键字：JSON 对象 删除 异步 屏幕      更新时间：2023-09-26

我正在尝试创建一个单页应用程序，该应用程序从JSON文件中提取信息，将其显示在屏幕上，并执行一些操作。

现在，我已经将所有信息正确显示在屏幕上：http://jsfiddle.net/rcsayf7t/3/

当点击JSON对象时，我需要"删除"按钮来异步地从屏幕上删除它，但不幸的是，我不知道如何完成它

HTML:

<table>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Name</th>
            <th scope="col">Message</th>
            <th scope="col">Date</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody class="tweets-result"></tbody>
</table>

jQuery:

// helper function for formatting date
function formatDate(date) {
    var dateSplit = date.split(" ");
    var displayDate = dateSplit[0] + ", " + dateSplit[1] + " " + dateSplit[2];
    // return the result
    return displayDate;
}

$(document).ready(function () {
    // start ajax request
    $.ajax({
        url: "https://gist.githubusercontent.com/arlodesign/7d80edb6e801e92c977a/raw/24605c9e5de897f7877b9ab72af13e5b5a2e25eb/tweets.json",
        dataType: "text",
        success: function (data) {
            // store the JSON data
            var tweetData = $.parseJSON(data);
            // loop through json values and build the table
            $.each(tweetData.tweets, function (index, item) {
                $('.tweets-result').append(
                    '<tr>' +
                    '<td><img src="' + item.profile_image_url + '" alt="@' + item.screen_name + ' avatar"></td>' +
                    '<td><a href="https://twitter.com/' + item.screen_name + '">@' + item.screen_name + '</a></td>' +
                    '<td>' + item.text + '</td>' +
                    '<td>' + formatDate(item.created_at) + '</td>' +
                    '<td>Remove</td>' +
                    '</tr>');
                    // WHEN YOU CLICK "REMOVE", THE TWEET SHOULD
                    // ASYNCHRONOUSLY BE REMOVED FROM THE SCREEN
            });
        }
    });
});

实时演示

只需在ajax成功内部添加以下内容：

$('.remove_row').click(function(){
      $(this).closest('tr').remove();
});

和以下代码作为删除属性：

class="remove_row"

完整JS（阅读我的评论）：

// helper function for formatting date
function formatDate(date) {
    var dateSplit = date.split(" ");
    var displayDate = dateSplit[0] + ", " + dateSplit[1] + " " + dateSplit[2];
    // return the result
    return displayDate;
}

$(document).ready(function () {
    // start ajax request
    $.ajax({
        url: "https://gist.githubusercontent.com/arlodesign/7d80edb6e801e92c977a/raw/24605c9e5de897f7877b9ab72af13e5b5a2e25eb/tweets.json",
        dataType: "text",
        success: function (data) {
            // store the JSON data
            var tweetData = $.parseJSON(data);
            // loop through json values and build the table
            $.each(tweetData.tweets, function (index, item) {
                $('.tweets-result').append(
                    '<tr>' +
                    '<td><img src="' + item.profile_image_url + '" alt="@' + item.screen_name + ' avatar"></td>' +
                    '<td><a href="https://twitter.com/' + item.screen_name + '">@' + item.screen_name + '</a></td>' +
                    '<td>' + item.text + '</td>' +
                    '<td>' + formatDate(item.created_at) + '</td>' +
                    '<td class="remove_row">Remove</td>' + // ## Here add the class remove_row
                    '</tr>');
                    // WHEN YOU CLICK "REMOVE", THE TWEET SHOULD
                    // ASYNCHRONOUSLY BE REMOVED FROM THE SCREEN
            });
            //## Here assign the even on click for the remove button
            $('.remove_row').click(function(){
               $(this).closest('tr').remove();
            });
        }
    });

});
相关文章：