如何让我的删除按钮删除单行

How do I get my delete button to delete a single row?

本文关键字：删除按钮单行我的更新时间：2023-09-26

<!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的新手。任何帮助，不胜感激。目前，您单击删除按钮没有任何反应。但我用控制台测试了它.log它确实记录了它正在被点击。只是不确定如何使用.remove。

尝试将函数更改为：

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

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

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