Javascript 从屏幕异步删除JSON对象

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

现在，我已将所有信息正确显示在屏幕上：

我需要“Remove”按钮在单击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>

// 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
            });
        }
    });
});

名称
消息
日期

jQuery:

<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>

// 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
            });
        }
    });
});

//格式化日期的帮助函数
函数格式日期（日期）{
var dateSplit=date.split（“”）；
var displayDate=dateSplit[0]+，“+dateSplit[1]+”+dateSplit[2]；
//返回结果
返回显示日期；
}
$（文档）.ready（函数（）{
//启动ajax请求
$.ajax({
url:“https://gist.githubusercontent.com/arlodesign/7d80edb6e801e92c977a/raw/24605c9e5de897f7877b9ab72af13e5b5a2e25eb/tweets.json",
数据类型：“文本”，
成功：功能（数据）{
//存储JSON数据
var tweetData=$.parseJSON（数据）；
//循环json值并构建表
$.each（tweetData.tweets，函数（索引，项）{
$（'.tweets结果'）。追加(
'' +
'' +
'' +
''+item.text+''+
''+格式日期（项目创建时间）+''+
“删除”+
'');
//当你点击“删除”时，TWEET应该
//可以从屏幕上异步删除
});
}
});
});

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

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

并将以下代码作为删除属性：

class="remove_row"

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

//格式化日期的帮助函数
函数格式日期（日期）{
var dateSplit=date.split（“”）；
var displayDate=dateSplit[0]+，“+dateSplit[1]+”+dateSplit[2]；
//返回结果
返回显示日期；
}
$（文档）.ready（函数（）{
//启动ajax请求
$.ajax({
url:“https://gist.githubusercontent.com/arlodesign/7d80edb6e801e92c977a/raw/24605c9e5de897f7877b9ab72af13e5b5a2e25eb/tweets.json",
数据类型：“文本”，
成功：功能（数据）{
//存储JSON数据
var tweetData=$.parseJSON（数据）；
//循环json值并构建表
$.each（tweetData.tweets，函数（索引，项）{
$（'.tweets结果'）。追加(
'' +
'' +
'' +
''+item.text+''+
''+格式日期（项目创建时间）+''+
'Remove'+/##此处添加类Remove#行
'');
//当你点击“删除”时，TWEET应该
//可以从屏幕上异步删除
});
//##此处为删除按钮指定均匀单击
$（'.remove_row'）。单击（函数（）{
$（this）.closest（'tr'）.remove（）；
});
}
});
});

定义

异步删除

以及您期望的全部行为和事件您尝试过我的答案吗？这是完美的，正是我想要的！非常感谢你的帮助。