jQuery / js:通过单击dom中的元素从JS中完全删除对象

时间:2015-07-31 00:12:25

标签: javascript jquery html

所以,当我有一个列表中显示的单个对象时。我正在尝试设置删除功能,当您单击附加的li时,该功能会完全删除该对象。有什么办法吗?

以下是我的一些代码:

employees = [];
employeesRole = [];
employeesWage = [];

function Employee(name, wage, role) { // object constructor
this.name = name; 
this.wage = wage;
this.role = role;
employees.push(this.name);
employeesRole.push(this.role);
employeesWage.push(this.wage);
}

每个单独的对象都存储在顶部的数组中。现在是jquery ......

    $('#del').on('click', function(e){
    if('.over3') {
        $('.over3').hide(); // This is the class for each li 
    };
    $('#main').on('click', 'li', function(e){
        var deleted = $(this).closest('li');
        //$(this).closest('li').remove();
        deleted.remove();
    });

这只是暂时删除它,一旦我导航回来或刷新它再次出现在列表中。任何方法一旦点击就永久删除一个对象?

谢谢!

3 个答案:

答案 0 :(得分:0)

删除列表项时,您只是删除项目本身而不是列表项目中的数据。

您需要执行阵列拼接以从阵列中删除数据。

array.splice(*indexInArray*,*numberOfElementsToRemove*)

答案 1 :(得分:0)

  

一旦我导航或刷新它再次出现在列表中

这意味着浏览器重新加载(a.k.a.再次重建其DOM)文档,因此您在运行时删除的所有项目将再次出现。

在没有服务器端更改的情况下执行此操作的唯一选择是将已删除元素的ID /路径存储在本地存储中,并在您自己的$(document).ready(callback)内重新应用删除。

答案 2 :(得分:0)

欢迎使用Stackoverflow Awbelton。

当您返回或刷新页面时,Javascript无法修改结果。我假设您要向服务器发出AJAX请求,要求它永久地从文件和/或数据库中删除它。

另一种删除它的方法是在客户端使用LocalStorage记住它,但这只会影响您的浏览器而不影响任何其他用户

PS:这个表达式总是评估为true,你可能想在这里做更多的逻辑吗?

$('#del').on('click', function(e){    
if('.over3') {
    $('.over3').hide(); // This is the class for each li 
};

与运行

相同
$('#del').on('click', function(e){
    $('.over3').hide(); // This is the class for each li