jquery动态添加、删除dom元素

jquery动态添加、删除dom元素

• 点击标签，在下方动态添加选中的元素及内容，再次点击标签，在下方动态删除选中的标签及元素

点击标签，在下方动态添加选中的元素及内容，再次点击标签，在下方动态删除选中的标签及元素

如图默认状态

点击1和2时，如图

再次点击1，效果如图

具体代码html代码如下：

<div class="layui-card">
<div class="layui-card-header">
全部标签
</div>
<div class="layui-card-body">
<div class="alllabel">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
</div>
<div class="layui-card" style="margin-top:10px;">
<div class="layui-card-header">
我订阅的标签
</div>
<div class="layui-card-body">
<div class="mylabel">
</div>
</div>
</div>

js代码如下

/*
* 标签点击事件
* */
var divlabel='';
$(".alllabel>div").click(function(){
var index=$(this).index();
if(  $(this).hasClass("selected")){
$(this).removeClass("selected")
divlabel='<div>'+$(this).html()	+'</div>'
$('div[data-id="id'+index+'"]').remove();
}else{
$(this).addClass("selected");
divlabel='<div data-id="id'+index+'">'+$(this).html()+'</div>'
$('.mylabel').append(divlabel)
}
})