Javascript类：创建和销毁元素

我不熟悉Javascript类，或者对类缺乏真正的支持

在任何情况下，我都希望创建一个函数，使用它可以创建和销毁DOM元素。我可以创建元素，但销毁它们有点棘手

如何在不提供ID的情况下调用destroy

function WorkZone() {
    this.create = function(id) {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function(id) {
        $(id).remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

功能工作区（）{
this.create=函数（id）{
$('', {
id:id，
班级：“工作区”
}).附于（“主体”）；
}
this.destroy=函数（id）{
$（id）.remove（）；
}
}
$（函数（）{
var zone=新工作区（）；
创建（）；
破坏区（）；
});

试试这个：

var WorkZone = {
    wz: null,
    create: function(id) {
        this.wz = $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    },

    destroy: function() {
        this.wz.remove();
    }
}

$(function() {
    var zone = WorkZone;
    zone.create('new_id');
    zone.destroy();
});

var工作区={
wz:null，
创建：函数（id）{
this.wz=$（''）{
id:id，
班级：“工作区”
}).附于（“主体”）；
},
销毁：函数（）{
这个.wz.remove（）；
}
}
$（函数（）{
var区=工作区；
创建（'new_id'）；
破坏区（）；
});

像这样：

function WorkZone() {
    this.create = function(id) {
        this.div = $('<div>', {
            id: id,
            class: 'work-zone'
        });
        this.div.appendTo('body');
    }

    this.destroy = function(id) {
         this.div.remove();
    }
}

功能工作区（）{
this.create=函数（id）{
this.div=$（“”{
id:id，
班级：“工作区”
});
本节附录（“正文”）；
}
this.destroy=函数（id）{
this.div.remove（）；
}
}

使用jQuery执行此操作，而不是创建自定义代码：

您将获得完全的浏览器支持和优化的代码，并能够使用许多不同类型的选择器执行这些DOM操作。

函数工作区（id）{
function WorkZone(id) {
    this.create = function() {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function() {
        $('#'+id).remove();
    }
}

$(function() {
    var zone = new WorkZone("ohyeababy");
    zone.create();
    zone.destroy();
});

this.create=function（）{
$('', {
id:id，
班级：“工作区”
}).附于（“主体”）；
}
this.destroy=函数（）{
$（'#'+id）.remove（）；
}
}
$（函数（）{
可变区=新工作区（“ohyeababy”）；
创建（）；
破坏区（）；
});

---

这不是实现最终目标的最佳方式，但它可以立即修复代码中的重复问题。：）

只需将对元素的引用作为对象的属性。然后destroy方法直接引用元素，您甚至不需要id

function WorkZone() {

    this.create = function(id) {

       // Remember the element
        this.element = $('<div>', {
                         id: id,
                         class: 'work-zone'
                       });
        // This could be chained to the above,
        // but it's a lot easier to read if it isn't
        this.element.appendTo('body');
    }

    this.destroy = function() {
        // Use element reference
        this.element.remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

---

如果没有id，您将销毁什么？是否也应该将其标记为jQuery？有一些

$（…）

正在进行……您是在这里使用jQuery还是其他框架？您应该添加一个标记或明确说明是哪一个。它使用jQuery，但问题是关于普通javascript。我认为OP希望创建多个WorkZone实例。

function WorkZone() {
  this.element;
}

WorkZone.prototype = {
  create: function(id) {
    this.element = $(..)...// create element, add to document
  },
  destroy: function() {
    this.element.remove();
  }
}

var zone = new WorkZone();
zone.create(id);
zone.destroy();