如何通过jQuery动态添加和删除元素？

Question

$(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>

现在，我有两个 div 区域。 Div2（右）包含一些元素，当我单击“添加”按钮时，它将移至 Div1（左）但我使用相同的概念将其移回 Div2，但不起作用。我错过了什么吗？

还有一个问题，怎么把图片改成

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

如果元素从 Div2 移动到 Div1。

Answer 1

由于元素是动态添加的，请使用委托事件处理程序：

$(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);
  });
});

这些工作通过将责任（因此得名 delegated）委派给一个不变的祖先元素（如果没有其他更接近/方便的情况，document 是最好的默认值）。在您的示例中，.div1 和 .div2 可能会这样做（如果它们永远不会改变的话）。

例如

$(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);
  });
});

这通过列出事件（例如点击）来冒泡到祖先。 然后 将 jQuery 选择器仅应用于气泡链中的元素。它然后将该函数仅应用于导致事件的匹配元素。结果是元素只需要在点击时存在，而不是在点击注册时存在。

注意事项：

• 目前您有 3 个 DOM 就绪处理程序。您可以在 3 块代码周围放置一个 DOM。
• DOM 就绪 处理程序的较短版本如下：

例如

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

Answer 2

由于您注册的事件是直接应用在 div 中的元素上，因此无论它们当前在.div1 还是.div2，它们的行为都不会改变

您必须使用.on 从.div1 或.div2 的子级中捕获其源为.intro 的任何委托点击事件，然后将目标移动到另一个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>

Answer 3

您需要为这些事件进行委托，因为它们是动态添加的。您也可以使用单击处理程序来实现这一点。

为 div1 和 div2 元素添加一个公共类，比如wrapperDiv：

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

然后使用：

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