javascript - 在 jQuery 中通过 onClick 删除动态生成的按钮

Question

我已通过 onclick 插入按钮，如果您单击该按钮，它将附加到 <div id="article-tags"></div> 中。就像下图一样，

为了创建它，我在下面安排了 HTML 代码段:

<div id="article-tags">
</div>

<div>
  <button type="button" data-id="1" data-name="tag" class="tag-item">tag</button>
  <button type="button" data-id="2" data-name="tag2" class="tag-item"> tag2</button>
  <button type="button" data-id="3" data-name="tag3" class="tag-item">tag3</button>
  <button type="button" data-id="4" data-name="tag4" class="tag-item">tag4</button>  
</div>

下面是 jQuery 代码段，

$(".tag-item").click(function(){
  var btnid = $(this).data("id");
  var btnname = $(this).data("name");
  $("#article-tags").append("<button type='button' class='tag-selected ntdelbutton'>"+ btnname +" &nbsp;<i class='fa fa-times-circle' aria-hidden='true'></i></button>");
  $(this).css({"background-color": "#DFE2E5", "color": "#ababab"});
  $(this).attr("disabled", true);
  return false;
});

但是现在，我想通过在

中填充的 onClick 删除按钮

<div id="article-tags"></div>

我尝试使用下面的 jQuery 代码段:

$(".tag-selected").click(function(){
  $(this).remove();
});

或

$(".tag-selected").live("click", function() {
      $(this).remove();   
    });

但两者都不起作用。请帮我解决这个问题。

Answer 1

试试下面的代码。是否要在删除指定元素后恢复 'disabled': false 属性？

$(".tag-item").click(function() {
  var btnid = $(this).data("id");
  var btnname = $(this).data("name");
  $("#article-tags").append("<button type='button' class='tag-selected ntdelbutton'>" + btnname + " &nbsp;<i class='fa fa-times-circle' aria-hidden='true'></i></button>");
  $(this).css({
    "background-color": "#DFE2E5",
    "color": "#ababab"
  });
  $(this).attr("disabled", true);
  $(".ntdelbutton").click(function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="article-tags">
</div>

<div>
  <button type="button" data-id="1" data-name="tag" class="tag-item">tag</button>
  <button type="button" data-id="2" data-name="tag2" class="tag-item"> tag2</button>
  <button type="button" data-id="3" data-name="tag3" class="tag-item">tag3</button>
  <button type="button" data-id="4" data-name="tag4" class="tag-item">tag4</button>
</div>