動的に生成されたボタンのjQuery

Question

でのonClickで、私はあなたがボタンをクリックした場合、それが作成するには、ちょうど下の画像のように <div id="article-tags"></div>内

を追加しますような方法でのonclickでボタンを挿入した

を削除ことを、私は、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; 
}); 

しかし、今、私は以下の次のjQueryのコード・セグメントを使用してしようとした

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

内に取り込まれるのonClickによってボタンを削除したいと思います：

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

Answer 2

プレーン（むしろjQueryライブラリより）JavaScriptと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>