Question

我正在尝试创建一个单页应用，从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
            });
        }
    });
});

Answer 1

Live demo

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

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

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

class="remove_row"

Full 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();
            });
        }
    });


});

从屏幕上异步删除JSON对象

1 个答案: