Javascript 附加<；部门>；使用“单击”并使用“单击”删除

我有以下问题：

我附加div：

$(".class").click(function() {   
    $(this).append("<div class='click'></div>");
    $("div.click").show();
});

从中删除“开”

---

以下是一个基于您的工作的示例：

单击以添加绿色框
单击以删除所有绿色框
$（“.class”）。单击（函数（）{
$（此）。追加（“”）；
});
$（“.button”）。单击（函数（e）{
e、 预防默认值（）；
$（“div.click”）.remove（）；
});

试着保持一个指向div的指针，下面应该可以

var tempDiv;
$(".class").click(function() {   
  tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  tempDiv.remove();
});

var-tempDiv；
$（“.class”）。单击（函数（）{
tempDiv=$（“”）。appendTo（$（this））.show（）；
});
$（“.button”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
tempDiv.remove（）；
});

---

否则你可以用这种方法

$(".class").click(function() {   
   $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  $('.click').remove();
});

$（“.class”）。单击（函数（）{
$（“”）.appendTo（$（this））.show（）；
});
$（“.button”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'.click'）.remove（）；
});

PS：如果

类在默认情况下不隐藏，您也可以删除
.show（）
。单击
类将被删除

$(".button").on("click", function (e) {

    e.preventDefault();
    $("div.click").remove();
});

检查我的小提琴

动态创建元素时，需要委托事件：
.on（事件、选择器、处理程序（eventObject））

如果您想要删除元素，您应该使用
.remove（）
方法而不是
.hide（）
您可以像这样使用javaScript动态地添加和删除div

检查这个例子


在本例中，默认的删除按钮删除最近添加的div，或者您可以说是容器中的最后一个div
但是，如果要删除具有div place number的特定div，可以输入div number

代码示例

HTML


第一组
添加
去除
输入要删除的div编号
好啊

JS

var计数器=0；
$（“#确定”）。单击（函数（）{
$（'.Main'）.append（'newdiv'+计数器+''）；
计数器++；
})
$（“#del”）。单击（函数（）{
$（'.Main div'）。删除（':last child'）；
})
$（“#Vok”）。单击（函数（）{
var Val=$（'#V'）.Val（）；
$（'.Main div:n个子（'+Val+'））.remove（）；
})
试试这个
你有两个按钮。
说：
第0课
单击以添加
单击以删除
JS代码是：
var计数器=1；
$（“.button1”）。单击（函数（）{
$（'.Main'）.append（“新添加的Div”+计数器+”）；
计数器++；
$（“div.click”）.show（）；
});
$（“.button2”）。单击（函数（）{
$（'.Main div'）。删除（':last child'）；
});
您是否打算实际删除它？还是把它藏起来？因为目前您只执行后者。按钮上的单击处理程序是否实际被调用？我猜，“…”中的某些内容导致了错误，或者.button click函数未被调用。是否有任何特定原因将
隐藏
放在
preventDefault（）
之后？为什么不在之前呢？这样就很清楚了。是的，div在那里，那将实现什么？不-据我所知，这并不相关。
var tempDiv;
$(".class").click(function() {   
  tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  tempDiv.remove();
});

$(".class").click(function() {   
   $("<div class='click'></div>").appendTo($(this)).show();
});

$(".button").on("click", function(e){
  e.preventDefault();
  $('.click').remove();
});

$(".button").on("click", function (e) {

    e.preventDefault();
    $("div.click").remove();
});

$(document).on("click", ".button", function(e){
    e.preventDefault();
    ...
    $("div.click").hide();
});

<div class="Main">
    <div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>

var counter=0;
$("#ok").click(function(){
    $('.Main').append('<div> new div'+counter+'</div>');
    counter++;
})
$("#del").click(function(){
    $('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
    var Val=$('#V').val();
    $('.Main div:nth-child('+Val+')').remove();
})

Try this

You have two buttons.

Say:

<div class="Main">
    <div>Div0</div>
</div>

<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>


and JS Code is :

var counter=1;

$(".button1").click(function() {  

$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});

$(".button2").click(function() {

$('.Main div').remove(':last-child');
});