How do I delete dynamically created elements in javascript/jquery?

Question

So I'm trying to figure out a way to delete dynamically created elements in my program. I can currently add a pattern above or below the current one.

What I am trying to do though, is to add a delete button right beside the two rows of squares, and then once the user clicks on that button, the particular pattern is removed and all other patterns move into proper positions.

What I have done so far:

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;
    }
});   
});

Any help or feedback is much appreciated!

Tobia · Accepted Answer · 2016-09-28 16:51:04Z

4

You can add the delete button inside a container and use it to delete. Can be easy to move the button where you want.

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();
});
});

answered Sep 28, 2016 at 16:51

Tobia

9,59529 gold badges122 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

blazerix Over a year ago

Do you know how I can make the delete button appear beside the two rows of squares?

NSTuttle Over a year ago

You would most likely have to add classes to/for the dynamically generated content. Jquery would make that easier. $( "yourElem" ).addClass( "newClass" ); Just rope that in with your creation of the button.

Tobia Over a year ago

@blazerix this is a style problem and you have to design it ignoring the js. This is a quick example: codepen.io/anon/pen/QKgBzP but it is be better to review the html struct

NSTuttle · Accepted Answer · 2016-09-28 16:54:13Z

1

You could look at the parent of the button and force a remove:

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

On creation of another repeatableX, you would also be creating a button just for that container I assume.

On that button click you would look at the parent ID for the button, in your case, repeatableX, then tell it to remove that parent, something similar to the above snippet.

answered Sep 28, 2016 at 16:54

NSTuttle

3,3352 gold badges19 silver badges26 bronze badges

2 Comments

NSTuttle Over a year ago

Tobia's answer is more complete, go with his.

blazerix Over a year ago

I know stackoverflow advises against off-topic posts...but thanks for the response!

Collectives™ on Stack Overflow

How do I delete dynamically created elements in javascript/jquery?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related