CODEWITHSUNDEEP
jqueryjquery-ui
Praveen
Praveen

Reputation: 25

remove child using jquery

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

Answers (3)

Muhammad Omer Aslam
Muhammad Omer Aslam

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

Deepak Dixit
Deepak Dixit

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

silverysquirrel
silverysquirrel

Reputation: 1

You can do jQuery('.draggable i').remove(); and the text will remain.

Upvotes: 0

Related Questions