How to remove dynamicaly created object jQuery UI

Question

I work with jQuery UI dragable and resizable object.

As u can see at top i have 2 inputs at which user add some Width and Height parameters, after clicking ob button Add area user can see new area at the view.

In hover i add remove button, but this button not vorking as aspect. First object this button deleted, but if user add few object and for example want to remove object #3 it's not deleting.

I try few method to delete object but it's not working.

For now i use this method to deleting:

$(document).on("mouseover", function(event) {
  console.log('#' + event.target.id + '')
  $('#' + event.target.id + '').find("#delete-area").toggleClass("hide")
  $('#' + event.target.id + '').find("#delete-area").toggleClass("gg-remove")
  $("#delete-area").click(function() {
    $('#' + event.target.id + '').parent().remove();
  });
});

But this deleting all view from page.

user_2943218 · Answer

The problem is that you are having multiple elements with the same id. ID should always be unique.

$(document).on("mouseenter",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("mouseleave",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});

$(document).on("click",".delete-area",function() {
  $(this).parent().remove();
});

I've changed the id to class in js code, and now it works.

Also having a click event inside a another event, will keep generating the click event every time the other event is triggered. I've moved your code a bit

I would also recommend that you use mouseenter and not mouseover.

Demo

var count = 0;

$(".lpms-3-button").click(function() {
  count += 1;

  var areaWith = $("#width-area").val();
  var areaHeight = $("#height-area").val();
  var areaColor = $("#text").val();
  var valueStream = $("#valueStream option:selected").text();
  console.log(areaWith, areaHeight, valueStream)
  var objects1 = `


`

  $(".grid").append(objects1);
  $(".grid-item").draggable({
    grid: [10, 10],
    snap: ".drop-target"
  });

  $(".drop-target").droppable({
    accept: ".drag-item"
  });
  $('.grid-item').resizable();
  $("#width-area").val("");
  $("#height-area").val("");
  $("#text").val("")
});

var myDraggable = $('.grid-item').draggable();
var widget = myDraggable.data('ui-draggable');
var clickEvent = null;

myDraggable.click(function(event) {
  if (!clickEvent) {
    widget._mouseStart(event);
    clickEvent = event;
  } else {
    widget._mouseUp(event);
    clickEvent = null;
  }
});

$(document).on("mouseenter",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("mouseleave",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});

$(document).on("click",".delete-area",function() {
  $(this).parent().remove();
});

.resizable {
  position: absolute;
  bottom: 2px;
  right: 5px;
  cursor: pointer;
}

.drop-target {
  width: 100%;
  height: 100vh;
  border: dashed 1px orange;
  background: whitesmoke url('https://s3.amazonaws.com/com.appgrinders.test/images/grid_20.png') repeat;
}

.area-builder {
  display: contents;
}



.gg-remove {
  box-sizing: border-box;
  position: relative;
  display: block;
  float: right;
  top: 5px;
  right: 5px;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid;
  border-radius: 22px
}

.gg-remove::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 5px;
  top: 8px;
  left: 4px
}

How to remove dynamicaly created object jQuery UI

1 Answers