在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属性？

＆＃13;

＆＃13;

$(".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();
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一种使用普通javascript（而不是jQuery库）和一些CSS的方法：

＆＃13;

＆＃13;

var upperButtons = document.querySelectorAll('.upper button');
var lowerButtons = document.querySelectorAll('.lower button');

for (let i = 0; i < lowerButtons.length; i++) {
    lowerButtons[i].addEventListener('click', function(){upperButtons[i].style.visibility = 'visible'; lowerButtons[i].setAttribute('disabled','disabled');}, false);
}

for (let i = 0; i < upperButtons.length; i++) {
    upperButtons[i].addEventListener('click', function(){upperButtons[i].removeAttribute('style'); lowerButtons[i].removeAttribute('disabled');}, false);
}

＆＃13;

.upper button {
visibility: hidden;
}

＆＃13;

<div class="upper">
<button type="button">tag</button>
<button type="button">tag2</button>
<button type="button">tag3</button>
<button type="button">tag4</button> 
</div>

<div class="lower">
<button type="button">tag</button>
<button type="button">tag2</button>
<button type="button">tag3</button>
<button type="button">tag4</button>  
</div>

＆＃13;

＆＃13;

＆＃13;