.parent() 的 .Remove() 不会删除 Div
.Remove() for .parent() doesn't remove Div
在尝试参考 Whosebug 上的各种示例后，似乎没有任何效果。
我试过这样的例子：
$(document).ready(function(){
$("button").click(function(){
$("div").parent().remove();
});
});
$('button').click(function() {
var index = $(this).data('index');
$("'#s-" + index + "'").removeClass('.selected-list');
});
$('button').on('click', function() {
var Id = parseInt(this.id);
$('#' + Id).parent().remove('.s-remove');
});
$('#s-remove').on('click',function() {
var Id = parseInt(this.id);
$('#' + Id).remove();
});
$('#selected-list').on('click', '.selected-list', function(){
alert("Product " + $(this).children().eq(0).text() + " has been removed.");
// delete this element
$(this).remove();
}); //end
但其中 none 个是我想要的。
我想要的是 div 中的嵌套按钮，以删除包含该特定按钮的整个 div。
div 包含：
标题 |成本 |数量 |总 |按钮
这是在我的购物车中找到的。与我之前的项目相比，这是一个有趣的练习示例程序。一旦用户点击产品 objects 并移动到 "selected-list" div，就会创建 "remove" 按钮。
由于某种原因，jsfiddle 示例在底部显示了购物车（仅供参考）
https://jsfiddle.net/W4Km8/4561/
代码：
$(function(){
var i = 0;
function Products (type, title, description, cost, image){
this.type = type;
this.title = title;
this.description = description;
this.cost = cost;
this.image = image;
this.displayInfo = function(){
var info ="<div class='p-image'>";
info += this.image + "</div><div class='p-title'> ";
info += this.title + "</div><div class='p-cost'>";
info += "Cost: " + this.cost + "</div><div class='p-desc'>";
info += "Description: " + this.description + "</div>";
return info;
}
}
// define an array to store courses
var product_list = [];
// You may create an instance of the object and then add it to the array
var im1 = "<img src='http://blogs-images.forbes.com/jasonevangelho/files/2014/08/Call-of-Duty-Advanced-Warfare1.jpg' style = 'width:150px; height:150px;'>";
var des1 = "Hi dif di dfid dif di fdif sdlf sfi sdlfdsfi dlfsf dilfsfdlif df idl d fsdif d fd fd fd f idl flsfl difdl ";
var product = new Products('video_games','COD',des1, 10.00, im1);
product_list.push(product);
product_list.push(new Products('movies','Sci-fi', 'desc', 3.00, im1));
for (var i=0; i<product_list.length; i++){
var div_row = "<div class='list' data-index='" +i+ "' >";
div_row += product_list[i].displayInfo() + "</div>";
$('#list').append(div_row);
}
$('.list').on('click', function(){
// read index using data- attribute
var index = $(this).data('index');
if ($('#s-'+index).length>0) {
// There is an item in the shopping cart with the same index. Do not add this element
alert("The product selected is already in your shopping cart.");
} else {
// Use the index to define an id for each row. This should allow us to check if the course is already selected
var div_info = "<div class='selected-list' id='s-"+index + "' data-index='"+index+"'>" +"<div id = '" + index + "' class = 's-title'>";
div_info += product_list[index].title + "</div><div class = 's-cost'>";
div_info += "Cost: " + product_list[index].cost + "</div><div class = 's-quan'>";
div_info += "Quanity:" + "<input type='text' class='qty' name='quantity' /></div><div class = 'input'>";
div_info += "Total Cost: " + "<input type='text' class='total' name='total' disabled/></div><div class = 's-remove' id = '" + index + "'>";
div_info += "<button>Remove</button></div>";
// Add to the shopping cart
$('#selected-list').append(div_info);
}
}); //end
$(".selected-list div").find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('div');
var quantity = parseInt(parent.find('.qty').val())||1;
var price = parseInt(parent.find('.s-cost').text())||0;
parent.find('.total').val(quantity*price);
//http://jsfiddle.net/vmndhh1a/30/
});
/* This is where I had attempted the .remove() function *****/
$('#category').on('change', function(){
// Remove existing filter by displaying all rows
$('#list').show();
// read the category value
var category = $(this).val();
if (category != '0') {
// hide all the other table rows
$('#list').not('.'+category).hide();
}
}); //end
//update cart totals:
}); //main end
HTML:
<body>
<div id = 'wrap'>
<div id = 'title'>
<p id = 'p-title'> Welcome to Our Electronic Store </p>
</div>
<div id = 'top'>
<div class = "nav">
<ul id = "nav1" class= "text-left">
<li><a href = "main.html">Home</a></li>
<li><a href = "tech.html">Electronics Store</a></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><a href = "#"><strong>Sign Up</a></li>
<li><a href = "#">Sign In</a></li>
<li><a href = "#">Contact</strong></a></li>
</ul>
</div>
</div>
<div id = 'sidemenu'>
<select id ='category' class = 'decorated'>
<option disabled="disabled" selected="selected">Select Categories</option>
<optgroup label="Video Games"></optgroup>
<option id = 'op' value = 'video_games' font>First-Person-Shooter</option>
<option id = 'op' value = 'video_games'>Adventure</option>
<option id = 'op' value = 'video_games'>Platform</option>
<option id = 'op' value = 'video_games'>Puzzle</option>
<option id = 'op' value = 'video_games'>Role-Playing</option>
<option id = 'op' value = 'video_games'>Simulation</option>
<option id = 'op' value = 'video_games'>Strategy/Tactics</option>
<option id = 'op' value = 'video_games'>Sports</option>
</optgroup>
<optgroup label="Movies"></optgroup>
<option id = 'op' value = 'movies'>Action</option>
<option id = 'op' value = 'movies'>Adventure</option>
<option id = 'op' value = 'movies'>Animation</option>
<option id = 'op' value = 'movies'>Comedy</option>
<option id = 'op' value = 'movies'>Fantasy</option>
<option id = 'op' value = 'movies'>Historical</option>
<option id = 'op' value = 'movies'>Horror</option>
<option id = 'op' value = 'movies'>Mystery</option>
<option id = 'op' value = 'movies'>Romance</option>
<option id = 'op' value = 'movies'>Sci-Fi</option>
<option id = 'op' value = 'movies'>Thriller</option>
</optgroup>
</select>
</div>
<div id = 'container' >
<!-- List of Products -->
<div class = 'list' id = 'list'>
</div>
</div>
<!-- List of Products Selected -->
<div id = 'selected-list' class= 'selected-list'>
<div id = 'title-s'> Shopping Cart </div>
<div id = 'calc'>
</div>//end
试试这个：
$('#selected-list').on('click','button', function() {
var item = $(this).closest('.selected-list');
console.log("remove: " + item.find('.s-title').text());
item.remove();
});
on('click','button') 的原因是因为在 脚本 运行 之后添加了按钮 。
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
有关详细信息，请查看 https://api.jquery.com/on/
上有关 "delegated events" 的部分
在尝试参考 Whosebug 上的各种示例后，似乎没有任何效果。
我试过这样的例子：
$(document).ready(function(){
$("button").click(function(){
$("div").parent().remove();
});
});
$('button').click(function() {
var index = $(this).data('index');
$("'#s-" + index + "'").removeClass('.selected-list');
});
$('button').on('click', function() {
var Id = parseInt(this.id);
$('#' + Id).parent().remove('.s-remove');
});
$('#s-remove').on('click',function() {
var Id = parseInt(this.id);
$('#' + Id).remove();
});
$('#selected-list').on('click', '.selected-list', function(){
alert("Product " + $(this).children().eq(0).text() + " has been removed.");
// delete this element
$(this).remove();
}); //end
但其中 none 个是我想要的。
我想要的是 div 中的嵌套按钮，以删除包含该特定按钮的整个 div。
div 包含：
标题 |成本 |数量 |总 |按钮
这是在我的购物车中找到的。与我之前的项目相比，这是一个有趣的练习示例程序。一旦用户点击产品 objects 并移动到 "selected-list" div，就会创建 "remove" 按钮。 由于某种原因，jsfiddle 示例在底部显示了购物车（仅供参考） https://jsfiddle.net/W4Km8/4561/
代码：
$(function(){
var i = 0;
function Products (type, title, description, cost, image){
this.type = type;
this.title = title;
this.description = description;
this.cost = cost;
this.image = image;
this.displayInfo = function(){
var info ="<div class='p-image'>";
info += this.image + "</div><div class='p-title'> ";
info += this.title + "</div><div class='p-cost'>";
info += "Cost: " + this.cost + "</div><div class='p-desc'>";
info += "Description: " + this.description + "</div>";
return info;
}
}
// define an array to store courses
var product_list = [];
// You may create an instance of the object and then add it to the array
var im1 = "<img src='http://blogs-images.forbes.com/jasonevangelho/files/2014/08/Call-of-Duty-Advanced-Warfare1.jpg' style = 'width:150px; height:150px;'>";
var des1 = "Hi dif di dfid dif di fdif sdlf sfi sdlfdsfi dlfsf dilfsfdlif df idl d fsdif d fd fd fd f idl flsfl difdl ";
var product = new Products('video_games','COD',des1, 10.00, im1);
product_list.push(product);
product_list.push(new Products('movies','Sci-fi', 'desc', 3.00, im1));
for (var i=0; i<product_list.length; i++){
var div_row = "<div class='list' data-index='" +i+ "' >";
div_row += product_list[i].displayInfo() + "</div>";
$('#list').append(div_row);
}
$('.list').on('click', function(){
// read index using data- attribute
var index = $(this).data('index');
if ($('#s-'+index).length>0) {
// There is an item in the shopping cart with the same index. Do not add this element
alert("The product selected is already in your shopping cart.");
} else {
// Use the index to define an id for each row. This should allow us to check if the course is already selected
var div_info = "<div class='selected-list' id='s-"+index + "' data-index='"+index+"'>" +"<div id = '" + index + "' class = 's-title'>";
div_info += product_list[index].title + "</div><div class = 's-cost'>";
div_info += "Cost: " + product_list[index].cost + "</div><div class = 's-quan'>";
div_info += "Quanity:" + "<input type='text' class='qty' name='quantity' /></div><div class = 'input'>";
div_info += "Total Cost: " + "<input type='text' class='total' name='total' disabled/></div><div class = 's-remove' id = '" + index + "'>";
div_info += "<button>Remove</button></div>";
// Add to the shopping cart
$('#selected-list').append(div_info);
}
}); //end
$(".selected-list div").find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('div');
var quantity = parseInt(parent.find('.qty').val())||1;
var price = parseInt(parent.find('.s-cost').text())||0;
parent.find('.total').val(quantity*price);
//http://jsfiddle.net/vmndhh1a/30/
});
/* This is where I had attempted the .remove() function *****/
$('#category').on('change', function(){
// Remove existing filter by displaying all rows
$('#list').show();
// read the category value
var category = $(this).val();
if (category != '0') {
// hide all the other table rows
$('#list').not('.'+category).hide();
}
}); //end
//update cart totals:
}); //main end
HTML:
<body>
<div id = 'wrap'>
<div id = 'title'>
<p id = 'p-title'> Welcome to Our Electronic Store </p>
</div>
<div id = 'top'>
<div class = "nav">
<ul id = "nav1" class= "text-left">
<li><a href = "main.html">Home</a></li>
<li><a href = "tech.html">Electronics Store</a></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><a href = "#"><strong>Sign Up</a></li>
<li><a href = "#">Sign In</a></li>
<li><a href = "#">Contact</strong></a></li>
</ul>
</div>
</div>
<div id = 'sidemenu'>
<select id ='category' class = 'decorated'>
<option disabled="disabled" selected="selected">Select Categories</option>
<optgroup label="Video Games"></optgroup>
<option id = 'op' value = 'video_games' font>First-Person-Shooter</option>
<option id = 'op' value = 'video_games'>Adventure</option>
<option id = 'op' value = 'video_games'>Platform</option>
<option id = 'op' value = 'video_games'>Puzzle</option>
<option id = 'op' value = 'video_games'>Role-Playing</option>
<option id = 'op' value = 'video_games'>Simulation</option>
<option id = 'op' value = 'video_games'>Strategy/Tactics</option>
<option id = 'op' value = 'video_games'>Sports</option>
</optgroup>
<optgroup label="Movies"></optgroup>
<option id = 'op' value = 'movies'>Action</option>
<option id = 'op' value = 'movies'>Adventure</option>
<option id = 'op' value = 'movies'>Animation</option>
<option id = 'op' value = 'movies'>Comedy</option>
<option id = 'op' value = 'movies'>Fantasy</option>
<option id = 'op' value = 'movies'>Historical</option>
<option id = 'op' value = 'movies'>Horror</option>
<option id = 'op' value = 'movies'>Mystery</option>
<option id = 'op' value = 'movies'>Romance</option>
<option id = 'op' value = 'movies'>Sci-Fi</option>
<option id = 'op' value = 'movies'>Thriller</option>
</optgroup>
</select>
</div>
<div id = 'container' >
<!-- List of Products -->
<div class = 'list' id = 'list'>
</div>
</div>
<!-- List of Products Selected -->
<div id = 'selected-list' class= 'selected-list'>
<div id = 'title-s'> Shopping Cart </div>
<div id = 'calc'>
</div>//end
试试这个：
$('#selected-list').on('click','button', function() {
var item = $(this).closest('.selected-list');
console.log("remove: " + item.find('.s-title').text());
item.remove();
});
on('click','button') 的原因是因为在 脚本 运行 之后添加了按钮 。
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to
.on()
有关详细信息，请查看 https://api.jquery.com/on/
上有关 "delegated events" 的部分