jquery - 使用 jquery 的产品列表。方法移除()

标签 jquery html css

这是我的简单产品列表。我使用jquery。但我有一些问题。 Remove() 不工作,列表中的元素不删除。我不明白为什么。 请帮助我,对不起我的英语)。这是我的代码。

HTML

<div class="container">
   <h1>Product List</h1>
   <input type="text" name="newProduct" id="newProduct" placeholder="Enter your product here"/>
   <ul id="productList"></ul>
</div>  

CSS代码

* {
box-sizing:border-box;
}
body {
font-family: Tahoma, sans-serif;
}
.container {
    margin:0 auto;
    width:600px;
}
h1, #newProduct {
    text-align: center;
    width:598px;
}
 #newProduct {
    border:1px solid #999;
    padding: 20px;
    font-size: 28px;
    box-shadow: 0px 0px 3px #888;
}
#productList {
    list-style: none;
    padding-left:0;
    background-color: #F2F2F2;
}
.product {
    padding: 15px 0px 15px 40px;
    margin: 10px;
    position: relative; 
    font-size: 24px;
    box-shadow: 2px 2px 3px #848484;
    background-color: #fff;
    cursor: pointer;
}
.product:hover {
    background-color: #F2F2F2;
}
.doneProduct {
    margin-right: 40px;
}
.remove {
    background-image:    url('http://www.imageup.ru/img200/2152803/delete_ico.png');
    background-position: 0 0;
    width:30px;
    height: 30px;
    position: absolute;
    right: 20px;
    top:13px;   
    display: none;
}
.remove:hover {
    background-position: -34px 0px;
}
.product:hover> .remove {
    display: block;
}

j查询

function addNewProduct(e) {
    if(e.keyCode == 13) {
            var toAdd = $('input[name=newProduct]').val();
            $('#productList').append('<li class="product"> <input     type="checkbox" class="doneProduct"/>'+toAdd+'<div class="remove"></div><li/>');
            $('#newProduct').val('');
            e.preventDefault();
        };
};

function deleteProduct() {
    $(this).parent().remove();
};

$(function() {
    $("#newProduct").on('keypress', addNewProduct);
    $(".remove").live('click', deleteProduct);
}) ;

但是 remove() 不起作用,列表中的元素也没有删除。我不明白为什么。 请帮助我,对不起我的英语)

最佳答案

Live 不支持您的 Jquery 版本。 Live 在 1.7 版 中被弃用,在 1.9 版 中被移除。当你在 >=1.9 的版本上使用 live 时,它​​会给你一个错误(检查你的控制台)。

查看此处:http://api.jquery.com/live/

关于jquery - 使用 jquery 的产品列表。方法移除(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30816715/

相关文章:

jquery - 这里面的语法有什么问题吗?

c# - 如何在 jQuery 中获取 mvc c# 用户角色

html - CSS:将元素高度调整为屏幕的 x%

CSS 不透明度在 IE7 和 IE8 中的无序列表项上损坏

jquery - 如果它与当前 url 匹配,则将类添加到当前链接?

javascript - 烙印文本动画效果不佳

html - margin :0 自动不起作用

javascript - 实例化 JQuery 小部件时选择当前元素

javascript - 提交操作后关注特定的 'id'

html - Bootstrap 菜单打开链接背景颜色与类 ="nav navbar-nav"