如何删除javascript / jquery中动态创建的元素？

Question

因此，我试图找出一种删除程序中动态创建的元素的方法。 我目前可以在当前模式的上方或下方添加一个模式。

我要尝试做的是在两行正方形的旁边添加一个删除按钮，然后一旦用户单击该按钮，特定的图案就会被删除，所有其他图案都移到正确的位置。

到目前为止，我所做的是：

var id_num = 1;
var picker = null;
$(function () {
$(document).on('click', ".repeat", function (e) {
    e.preventDefault();
    var $self = $(this);
    var $parent = $self.parent();
    if($self.hasClass("add-bottom")){
      $parent.after($parent.clone(true).attr("id", "repeatable" + id_num));
      id_num = id_num + 1;
      //picker = null;

    } else {
      $parent.before($parent.clone(true).attr("id", "repeatable" + id_num));
      id_num = id_num + 1;
      //picker = null;
    }
});   
});

任何帮助或反馈深表感谢！

Answer 1

您可以在容器内添加删除按钮，然后使用它进行删除。 可以轻松地将按钮移动到所需位置。

http://codepen.io/anon/pen/QKgBzP

var id_num = 1;
var picker = null;
$(function () {
$(document).on('click', ".repeat", function (e) {
    e.preventDefault();
    var $self = $(this);
    var $parent = $self.parent();
    var newobj=$parent.clone(true).attr("id", "repeatable" + id_num);
    if($self.hasClass("add-bottom")){
      $parent.after(newobj);
      id_num = id_num + 1;
      //picker = null;

    } else {
      $parent.before(newobj);
      id_num = id_num + 1;
      //picker = null;
    }
    newobj.append("<button class=\"remove\"> Remove</remove>");
});   
$(document).on('click', ".remove", function (e) {
    $(this).parent().remove();
});
});

Answer 2

您可以查看按钮的父项并强制删除：

var elem = document.getElementById("yourid");
    elem.parentElement.removeChild(elem);

在创建另一个repeatableX ，您还将为我假设的那个容器创建一个按钮。

在该按钮上单击，您将查看该按钮的父代ID（在您的情况下为repeatableX ，然后告诉它删除该父代，类似于上面的代码片段。