Wie verschiebt man Elemente/Schaltflächen mit JQuery von einem Div in ein anderes?

Question

Ich habe zwei Divs auf HTML-Seite. Das sind im Grunde nichts anderes als zwei Spalten im HTML-Layout. Ich habe eine Liste von Schaltflächen in der linken Spalte (div). Ich habe jede Schaltfläche mit OK markiert und Glyphicons entfernt. Jetzt möchte ich, dass, wenn ich auf REMOVE-Symbol der Schaltfläche klicke, es dann entfernen sollte, andernfalls wenn ich auf das OK-Symbol der Schaltfläche klicke, dann sollte es in die rechte Spalte (div) verschoben werden. Ich habe eine js Geige hier erstellt: JS Fiddle

HTML:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
</script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class="row"> 
    <div class="col-sm-4" style="background-color:lavender;border: solid 1px blue;"> 
      <div class="text-center"> 
      <div class="list"> 
      </div> 
</div>  
</div> 
    <div class="col-sm-8" style="background-color:lavenderblush;border: solid 1px blue;"> 
      <div class="accepted"> 
      </div> 
      </div> 
</div> 

javascript:

var load = function() { 
    $.getJSON('https://api.myjson.com/bins/4skih', function (res) { 
    $.each(res.data, function (key, val) { 
     addTag(val.tag, key); 
    }); 
    }); 
}; 

var init = function() { 
    load(); 
    $('.list').on('click', 'button', function() { 
     $(this).parent().acceptTag(this); 
       $(this).parent().remove(); 
    }); 
}; 

$(document).ready(init); 

// Add tag to html. 
var addTag = function (tag) { 
    $("<div><button class='tag'>" + tag + "</button><span class='glyphicon glyphicon-ok' aria-hidden='true''></span><span class='glyphicon glyphicon-ok' aria-hidden='true''></span></div>").appendTo('.list'); 
}; 
var acceptTag = function (tag) { 
    $("<div><button class='tag'>" + tag + "</button><span class='glyphicon glyphicon-ok' aria-hidden='true''></span><span class='glyphicon glyphicon-ok' aria-hidden='true''></span></div>").appendTo('.accepted'); 
}; 

Jede Hilfe wird sehr geschätzt.

Answer 1

Ich habe wirklich eine kleine Änderung an Ihrem Code vorgenommen, damit es funktioniert.
Sie waren in der Nähe!

Erklärung:
Ihr Aufruf an die acceptTag Funktion war in der .list Ereignisse Delegation auf button Klick falsch.
Ich nannte es einfach wie Sie mit der addTag Funktion in der load() Funktion getan haben.

Und ich vereinfachte diese acceptTag Funktion, da Sie offensichtlich das übergeordnete Objekt (die Verpackung div) an es senden wollten.

Also alle button Definition war bereits vorhanden. Es wird von tag.html() abgerufen, was der übergeordnete HTML-Inhalt der Schaltfläche ist. Sie müssen es nur noch einmal in eine div einpacken.

Meine Fiddle

var load = function() { 
    $.getJSON('https://api.myjson.com/bins/4skih', function (res) { 
    $.each(res.data, function (key, val) { 
     addTag(val.tag, key); 
    }); 
    }); 
}; 

var init = function() { 
    load(); 
    $('.list').on('click', 'button', function() { 
     acceptTag($(this).parent());    // Changes here 
     $(this).parent().remove(); 
    }); 
}; 

$(document).ready(init); 

// Add tag to html. 
var addTag = function (tag) { 
    $("<div><button class='tag'>" + tag + "</button><span class='glyphicon glyphicon-ok' aria-hidden='true''></span><span class='glyphicon glyphicon-ok' aria-hidden='true''></span></div>").appendTo('.list'); 
}; 
var acceptTag = function (tag) {    // Changes here 
    $('.accepted').append("<div>" +tag.html()+ "</div>"); 
};