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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -