Dynamisch generierte Schaltfläche

Question

von onClick in jQuery entfernen

I-Taste von Onclick in einer Art und Weise eingesetzt haben, dass, wenn Sie auf den Button klicken, dann wird es

innerhalb <div id="article-tags"></div> genau wie das Bild unten, hängen

zu erstellen dass habe ich das HTML-Codesegment unten angeordnet:

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

Und das jQuery-Code Segment unter,

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

Aber gerade jetzt, würde Ich mag die Taste von onClick zu entfernen, die innerhalb

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

ich habe versucht, mithilfe des folgenden jQuery-Code Segment unten aufgefüllt wird:

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

oder

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

Aber keiner funktioniert. Bitte helfen Sie mir, dieses Problem zu lösen.

Answer 1

Versuchen Sie den folgenden Code. Möchten Sie das Attribut 'disabled': false nach dem Entfernen des angegebenen Elements wiederherstellen?

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

ist hier ein Ansatz Ebene mit Hilfe von Javascript (und nicht der jQuery-Bibliothek) und eine Prise 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>