Bouton généré dynamiquement et retiré par onClick en jQuery

Question

J'ai inséré un bouton par onclick de manière à ce que si vous cliquez sur le bouton, il s'ajoutera à l'intérieur de l'image. <div id="article-tags"></div> comme l'image ci-dessous,

Pour créer cela, j'ai arrangé le segment de code HTML ci-dessous :

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

Et le segment de code jQuery est ci-dessous,

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

Mais pour l'instant, je voudrais supprimer le bouton par onClick qui est rempli dans

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

J'ai essayé de le faire en utilisant le segment de code jQuery suivant :

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

o

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

Mais aucun des deux ne fonctionne. Veuillez m'aider à résoudre ce problème.

Answer 1

Essayez le code suivant. Voulez-vous restaurer 'disabled': false après avoir supprimé l'élément spécifié ?

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

Answer 2

Voici une approche utilisant le simple javascript (plutôt que la bibliothèque jQuery) et un soupçon de CSS :

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);
}

.upper button {
visibility: hidden;
}

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