Как удалить динамически созданные элементы в 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, вы бы также создать кнопку только для этого контейнера Я предполагаю.

На этой кнопке вы увидите идентификатор родителя для кнопки, в вашем случае, repeatableX, а затем скажите, чтобы удалить этот родитель, что-то похожее на приведенный выше фрагмент.