Jquery .Remove（）用于.parent（）不'；t删除Div_Jquery_Html_Function_Onclick_Removeclass

Jquery .Remove（）用于.parent（）不'；t删除Div

jquery html function

Jquery .Remove（）用于.parent（）不'；t删除Div,jquery,html,function,onclick,removeclass,Jquery,Html,Function,Onclick,Removeclass,在尝试参考StackOverflow的各种示例之后，似乎什么都不起作用我尝试过以下例子： $(document).ready(function(){ $("button").click(function(){ $("div").parent().remove(); }); }); $('button').click(function() { var index = $(this).data('index'); $("'#s-" + in

在尝试参考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后创建。出于某种原因，JSFIDLE示例在底部显示了购物车（仅供参考）

代码：

$（函数（）{
var i=0；
功能产品（类型、标题、说明、成本、图像）{
this.type=type；
this.title=标题；
this.description=描述；
成本=成本；
这个图像=图像；
this.displayInfo=函数（）{
var info=“”；
info+=this.image+“”；
info+=this.title+“”；
信息+=“成本：“+this.Cost+”；
信息+=“说明：“+this.Description+”；
退货信息；
}
}
//定义一个数组来存储课程
var乘积_list=[]；
//您可以创建对象的实例，然后将其添加到数组中
var im1=“”；
var des1=“高dif di dfid dif di fdif sdlf sfi sdlfdsfi dlfsf DILFSFDFLIF df idl d fsdif fd fd fd fd fd idl flsfl difdl”；
var产品=新产品（“视频游戏”、“COD”、des1、10.00、im1）；
产品列表。推送（产品）；
产品列表推送（新产品（‘电影’、‘科幻’、‘描述’、3.00、im1））；
对于（var i=0；i0）{
//购物车中存在具有相同索引的项目。请不要添加此元素
警报（“所选产品已在您的购物车中。”）；
}否则{
//使用索引为每一行定义一个id。这应该允许我们检查课程是否已经被选中
var div_info=“”+”；
div_info+=产品列表[索引]。标题+“”；
div_info+=“成本：+产品列表[索引]。成本+”；
div_info+=“数量：+”；
部门信息+=“总成本：+”；
div_info+=“删除”；
//添加到购物车
$（“#选定列表”）。追加（div#u信息）；
}
}); //结束
$（“.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；
父.find（'.total'）.val（数量*价格）；
//http://jsfiddle.net/vmndhh1a/30/
});
/*这就是我尝试使用.remove（）函数的地方*****/
$（'#category'）。关于（'change'，function（））{
//通过显示所有行删除现有筛选器
$（“#列表”）.show（）；
//读取类别值
var category=$（this.val（）；
如果（类别！=“0”）{
//隐藏所有其他表行
$（“#列表”）。而不是（“.+category）.hide（）；
}
}); //结束
//更新购物车总数：
}); //主端

HTML:


欢迎光临我们的电子商店









选择类别
第一人称射击手
冒险
站台
令人费解的事
角色扮演
模拟
战略/战术
体育
行动
冒险
动画
喜剧片
幻想
历史的
恐怖
神秘的
浪漫
科幻小说
惊悚片
购物车
//结束

试试这个：

$('#selected-list').on('click','button', function() {
  var item = $(this).closest('.selected-list');
  console.log("remove: " + item.find('.s-title').text());
  item.remove();
});

之所以启用（'click'，'button'），是因为这些按钮是在脚本运行之后添加的

事件处理程序仅绑定到当前选定的元素；它们必须在代码调用

.on（）

有关详细信息，请查看www.Wow.com上的“委托活动”部分。谢谢你的例子。我以前试过，但从未见过console.log。这解决了我需要的问题。还感谢您澄清我为什么不需要使用（'click'，'button'），但它有助于调试您的代码，在本例中，它会打印正在删除的项目。是的，我做了一些调整，但没有从中看到任何警报，因此我将其更改为：

alert（“已删除的产品”+item.find（'.s-title'）.text（））谢谢：）
<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();
});