Reputation: 25
What I have:
<div class="draggable ui-draggable ui-draggable-handle" name="text" id="created_at" style="opacity: 1;"><i class="fa fa-globe" aria-hidden="true"></i>created_at</div>
What I need:
<div class="draggable ui-draggable ui-draggable-handle" name="text" id="created_at" style="opacity: 1;">created_at</div>
What I tried:
ui.draggable.clone().find("i").remove();
This removing i tag as well as text next to it.
EDIT:
After dropping into container i want to remove i from that div tag.
Upvotes: 0
Views: 417
Reputation: 23788
I dont think that would be a problem see below
$(document).ready(function() {
$("#remove").click(function() {
$('.ui-draggable >i.fa').remove();
});
$(".area-drop").droppable({
accept: ".drag-item",
drop: function(event, ui) {
let draggable = $(ui.draggable[0]);
let draggableClone = draggable.clone();
$(this).append(draggableClone);
draggable.find('i.fa').remove();
}
});
$(".drag-item").draggable({
helper: "clone",
revert: "invalid"
});
});
body {
font-family: Arial;
font-size: 12px;
}
.area-drop {
border: 1px dashed #000;
width: 300px;
min-height: 150px;
text-align: center;
margin-top: 50px;
overflow: auto;
}
i.fa {
margin-right: 5px;
}
.drag-item {
display: inline-block;
background-color: #f2f2f2;
width: auto;
height: auto;
line-height: 1em;
}
.drag-item:not(:first-child) {
margin-left: 15px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<p>Drag icons to the DROP ZONE to filter out icons</p>
<div class="drag-item" name="text" id="created_at"><i class="fa fa-globe" aria-hidden="true"></i>created_at</div>
<div class="drag-item" name="text" id="created_at"><i class="fa fa-map" aria-hidden="true"></i>updated_at</div>
<div class="drag-item" name="text" id="created_at"><i class="fa fa-pencil" aria-hidden="true"></i>created_at</div>
<div class="drag-item" name="text" id="created_at"><i class="fa fa-trash" aria-hidden="true"></i>created_at</div>
<div class="area-drop">
DROP ZONE
</div>
Upvotes: 1
Reputation: 1620
If id of the parent is fixed then you can do something like that:-
var elToRemove = $("#created_at").find('i');
if(elToRemove.length){
elToRemove.remove();
}
Upvotes: 0
Reputation: 1
You can do jQuery('.draggable i').remove();
and the text will remain.
Upvotes: 0