Question

尝试在StackOverflow上引用各种示例后，似乎无效。

我尝试了以下示例：

    $(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

但这些都不是我想要的。

我想要的是div中的嵌套按钮，以删除包含该特定按钮的整个div。

div包含：

标题|费用|数量|总计|按钮

这可以在我的购物车中找到。与我以前的项目相比，这是一个有趣的实践程序。一旦用户单击Products对象并移动到“selected-list”div，将创建“删除”按钮。由于某种原因，jsfiddle示例显示底部的购物车（FYI） 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

Answer 1

试试这个：

$('#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')的原因是因为在脚本运行后添加了按钮。

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on()
时存在

有关详细信息，请查看https://api.jquery.com/on/
上的“委派活动”部分

.parent（）的删除（）不会删除Div

1 个答案: