Question

<!DOCTYPE html>
<html lang="en-us">

<head>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <meta charset="utf-8">
    <title>Class 3</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="../js/global.js"></script>
    <style>
        .row{
            margin-top: 5rem;
            border-bottom:1px solid black;
        }
    </style>
</head>

<body>
    <div id="page-container" class="col-md-12">
        <div class="col-mid-12 text-left">
            <input type="text" id="movie-title-search" value="" placeholder="Enter a Movie Title">
             <select id="media-select">
                <option class="mediaType" value="movie">Movie</option>
                <option class="mediaType" value="music">Music</option>
                <option class="mediaType" value="all">All</option>
            </select>
            <button type="button" id="movie-search-submit" class="btn btn-lg btn-primary">Search</button>
    </div>
    </div>
</body>

</html>




$(document).ready(function() {
    $('#movie-search-submit').on('click', function(e) {
        e.preventDefault();
        var search_term = encodeURIComponent($('#movie-title-search').val()); //gets value from element
        var select_media = encodeURIComponent($('#media-select').val());
        console.log(search_term);
        console.log(select_media);
        var url = 'https://itunes.apple.com/search?country=US&term=' + search_term + '&media=' + select_media;


        var log_response = function(response) {
            $.each(response.results, function(key, item) {

                if (item.longDescription !== undefined) {
                    populate_listings(key, item);
                }

            });
        }



        var populate_listings = function(key, item) {
            var result_row = '<div id="result-' + key + '" class="row"></div>';
            $('#page-container').append(result_row);
            var title = '<div class="api-result col-md-2 title"><h2>' + item.trackName + '</h2></div>'
            var year = '<div class ="api-result col-md-4 year"><h4>' + item.releaseDate + '</h4></div>'
            var description = '<div class ="api-result col-md-4 description"><p>' + item.longDescription + '</p></div>'
            var delete_button =  '<div class="btn btn-lg btn-primary col-md-2 delete">Delete</div>';
            $('#result-' + key).append(title);
            $('#result-' + key).append(year);
            $('#result-' + key).append(description);
            $('#result-' + key).append(delete_button);

        }

        $.ajax({
            method: "GET",
            url: url,
            dataType: 'jsonp',
            success: log_response,
        });
    });

    $('body').on('click','.delete', function(e) {
             e.preventDefault();
            var parentTag =  $('#page-container').parent().remove('.row');
         });

});

所以我试图让底部的.on点击删除一行结果。因为我是Jquery的新手，所以我不确定自己需要做什么。任何帮助，不胜感激。目前没有任何事情你点击删除按钮。但是我用console.log对它进行了测试，它确实注册了它被点击了。只是不确定如何使用.remove。

Answer 1

var delete_button =  '<div class="btn btn-lg btn-primary col-md-2 delete" onclick ="$(this).parent().remove();">Delete</div>';

你可以试试。它应该更容易，更加巩固。

Answer 2

尝试将您的功能更改为：

$('body').on('click','.delete', function(e) {
         e.preventDefault();
         $(this).parent().remove();
     });

如何获取删除按钮以删除单行？

2 个答案: