Question

当用户点击按钮时，我有一个附加到 body 的元素。我想通过单击删除附加的元素。我怎么能这样做？

代码

＆＃13;

    $("#btn1").click(function() {
      $("body").append("<div class='someClass'></div>");
  });
  $(".someClass").click(function() {
      $(this).remove();
  });

＆＃13;

.someClass{
  width:100px;
  height:100px;
  background:green; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">append div</button>

＆＃13;

Answer 1

您需要使用$(document).on('click','.someClass', function(){...}语法。这是因为在加载JQuery时，DOM中不存在类someClass的元素。并且您希望将click事件关联到其中。因此，您需要从click级别监听该document元素，以便在DOM中添加.someClass元素时，它会识别click事件。

$("#btn1").click(function(){
  $("body").append("<div class='someClass'></div>");	
});
$(document).on('click','.someClass', function(){
  $(this).remove();	
});

.someClass{
  width:100px;
  height:100px;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">append div</button>

Answer 2

问题是click事件仅适用于已存在的元素。由于您要动态添加元素，因此需要使用on()方法。这会将事件添加到以后动态添加的现有元素和元素。

例如：

$(document).on('click', '.someClass', function(){
    $("body").append("<div class='someClass'></div>");  
});

通过单击删除元素

2 个答案: