How to remove dynamicaly created object jQuery UI

Question

I work with jQuery UI dragable and resizable object.

Here u can see example

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.

Answer 1

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 = `<div class="grid-item" data-value-stream="${valueStream}" id="boxVs${count}" style="width:${areaWith + "px"};height:${areaHeight + "px"}; left: 0px; top: 0px; background-color: #ccc "> <a href="#" id="" class="btn btn-remove hide delete-area"></a > </div>` $(".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 }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="area-builder"> <input type="number" min="0" id="width-area" class="form-control" placeholder="Width"> <input type="number" min="0" id="height-area" class="form-control" placeholder="Height"> <select id="valueStream"> <option value="0">1</option> <option value="1">2</option> <option value="2">3</option> <option value="3">4</option> </select> <button type="button" class="lpms-3-button">Add area</button> </div> <div class="drop-target"> <div class="grid"> </div> </div>