javascript - How do I get my delete button to delete a single row? -
<!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 , 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 , 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 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 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'); }); });
so trying .on click @ bottom delete single row of results. i'm not sure need doing new jquery. appreciated. nothing happens click delete button. tested console.log , register being clicked. not sure how use .remove.
try changing function to:
$('body').on('click','.delete', function(e) { e.preventdefault(); $(this).parent().remove(); });
Comments
Post a Comment