Question

$('button').click(function() { $("ul").append('<div>').addClass("a");}); //Adding new DIVs

$('div').on('click',function() { $(this).replaceWith('');});  //Trying to remove them

This 是我的小提琴试图用“添加新！”简单地创建一个DIV。按钮，然后当点击DIV时，它被移除。
我尝试使用不同的命令删除部分，包括使用.click();代替.on();，并使用.hide();和.html('');以及.remove();代替.replaceWith('');所有这些都成功删除了已经编码到页面上的FIRST div，但没有任何附加到列表中的DIV。

Answer 1

删除时，您无法访问动态创建的div，例如$（＆＃39; div＆＃39;）

应该如下所示

您的HTML

＆＃13;

/* for adding div */

$('.addMore').click(function(){
  
  $('.appendHere').append('<div class="addedDiv"> Darth Vader is cool! </div>');
  
});

/* for removing */

$('.appendHere').on('click','.addedDiv',function(){
  
  /* for removing it */
  $(this).remove();
  
  /* for emptying it */
  $(this).html('');
  
});

＆＃13;

<div class="appendHere"></div>

<button class="addMore"> </button>

＆＃13;

Answer 2

试试此代码

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<button type="button">
Add New!   
</button>
<ul>

</ul>

JQuery代码

jQuery( document ).ready(function() {    
     jQuery('button').click(function() {

     jQuery("ul").append('<div>test</div>').addClass("clickbox");
     }); //Adding new DIVs 

 jQuery( "body" ).on( "click", "div", function() {      
  jQuery(this).remove();//to remove 
});

});

Css代码

.clickbox {
    cursor: pointer;//to display div text clickable.
}

您可以查看demo here

Answer 3

请参阅演示here。

注意：在div内添加ul不是一个好习惯。所以我创建了一个div.contents，其中附加了动态div。

<强> HTML：

<button type="button" class="btn">
    Add New!
</button>
<div class="contents"></div>

<强> JS：

$(function () {
    $('.btn').on('click', function () {
        $('.contents').append('<div class="a">New Div</div>');
    });
    $('body').on('click', '.a', function () {
        $(this).remove();
    });
});

可以删除第一个html DIV，但不能进一步附加

3 个答案: