CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dreams
Dreams

Reputation: 8506

How to dynamic add and remove element by jQuery?

$(document).ready(function(){
  var roles = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

  $.each(roles, function(){
    $(".div2").append("<div class='roles'><i class='fa fa-plus-circle'></i><span>" + this + "</span></div>");
  });
});

$(document).ready(function(){
  $(".div2 .roles").click(function(){
    var role = $(this)
    $(".div1").append(role);
  });
});

$(document).ready(function(){
  $(".div1 .roles").click(function(){
    var role = $(this)
    $(".div2").append(role);
  });
});
.div1,.div2 {
  display:inline-block;
}

.div1 {
  width:200px;
  height:230px;
  border: 2px solid rgba(204, 204, 204, 0.2);
  border-radius: 10px;
  margin-right:6px;
  float:left;
}

.div2 {
  width:200px;
  height:230px;
  margin-right:10px;
  background-color: #f8f8f8;
  border-radius: 10px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="div1"></div>
<div class="div2"></div>

Now, I have two div area. Div2(Right) contain some elements and when I click on "add" button it will move to Div1(Left) But I use same concept to move it back to Div2, but not working. Did I missing something?

Another question, how do I change the image to 

<i class="fa fa-minus-circle"></i>

if the element was move to Div1 from Div2.

Upvotes: 2

Views: 98

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82231

You will need to delegate for the events as they are dynamically added. Also you can use single click handler to achieve this.

add a common class to div1 and div2 element say wrapperDiv:

<div class="div1 wrapperDiv"></div>
<div class="div2 wrapperDiv"></div>

and then use:

$('.wrapperDiv').on('click','.roles',function(){
  $(this).parent().siblings('.wrapperDiv').append(this);
});

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

As the elements are added dynamically, use delegated events handlers:

$(document).ready(function(){
  $(document).on('click', ".div2 .roles", function(){
    var role = $(this)
    $(".div1").append(role);
  });
});

$(document).ready(function(){
  $(document).on('click', ".div1 .roles", function(){
    var role = $(this)
    $(".div2").append(role);
  });
});

These work by delegating responsibility (hence the name delegated) to an unchanging ancestor element (document is the best default if nothing else is closer/convenient). In your example .div1 & .div2 would probably do (if they never change).

e.g.

$(document).ready(function(){
  $('.div2').on('click', ".roles", function(){
    var role = $(this)
    $(".div1").append(role);
  });
});

$(document).ready(function(){
  $('.div1').on('click', ".roles", function(){
    var role = $(this)
    $(".div2").append(role);
  });
});

This works by listing for the events (e.g. click) to bubble up to the ancestor. It then applies the jQuery selector to only the elements in the bubble chain. It then applies the function to only the matching elements that caused the event. The upshot is the elements need only exist at click time and not when the click was registered.

Notes:

  • At the moment you have 3 DOM ready handlers. You could put a single DOM ready around the 3 blocks of code.
  • A shorter version of the DOM ready handler is as follows:

e.g.

$(function(){
   // Your code here
});

Upvotes: 1

fuyushimoya
fuyushimoya

Reputation: 9813

As the event you register is directly apply on the elements in the div, they're behavior won't change no matter they're currently in .div1 or .div2

You have to use .on to catch any delegated click events that its source is .intro from .div1 or .div2's children, and then move the target to another div.

$(document).ready(function(){
  var roles = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

  $.each(roles, function(){
    $(".div2").append("<div class='roles'><i class='fa fa-plus-circle'></i><span>" + this + "</span></div>");
  });
});

$(document).ready(function(){
  $(".div2").on('click', '.roles', function(){
    var role = $(this);
    $(".div1").append(role.detach());
  });
  $(".div1").on('click', '.roles', function(){
    var role = $(this);
    $(".div2").append(role.detach());
  });
});
.div1,.div2 {
  display:inline-block;
}

.div1 {
  width:200px;
  height:230px;
  border: 2px solid rgba(204, 204, 204, 0.2);
  border-radius: 10px;
  margin-right:6px;
  float:left;
}

.div2 {
  width:200px;
  height:230px;
  margin-right:10px;
  background-color: #f8f8f8;
  border-radius: 10px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="div1"></div>
<div class="div2"></div>

Upvotes: 0

Related Questions