![](/img/trans.png)
[英]Modal Is Deleting The First Row In The Table Incorrectly. How Do I get the right ID associated with my DELETE button?
[英]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 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。
var delete_button = '<div class="btn btn-lg btn-primary col-md-2 delete" onclick ="$(this).parent().remove();">Delete</div>';
你可以试试看。 它应该更容易并且更统一。
尝试将您的功能更改为:
$('body').on('click','.delete', function(e) {
e.preventDefault();
$(this).parent().remove();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.