Question

我有一个表格，其中包含一个名为tagbutton的div中名为tagdisplay的div列表，当我点击其中任何一个时，当我点击它们时，它们会被克隆到另一个div tagselected已复制到tagselected的div我希望它从tagselected中删除并重新显示在tagdisplay中。

到目前为止，我已设法将其从tagselected中删除，但我无法在tagdisplay中将其删除。我正在使用find()，但这不起作用......关于如何实现这一点的任何想法？

由于

以下是JSFiddle

这是我的HTML

<div id="tagselected"> </div>

                                 <div id="tagsdisplay">

         <table> 

    <tr> 

        <td>        <div class="tagbutton">Foo 1</div> </td>

         <td>        <div class="tagbutton">Foo 2</div> </td>

         <td>        <div class="tagbutton">Foo 3</div> </td>

         <td>        <div class="tagbutton">Foo 4</div> </td>

         <td>        <div class="tagbutton">Foo 5</div> </td>

     </tr>

         <tr>

         <td>        <div class="tagbutton">Foo 6</div> </td>

         <td>        <div class="tagbutton">Foo 7</div> </td>

         <td>        <div class="tagbutton">Foo 8</div> </td>

       </tr>

            </table>     

             </div>

这是我的javascript

//initiate the var
var count = 1;

$('.tagbutton').click(function () {

//if the number of tags is bellow 4 then do the following
if(count <= 4){

// Create a clone of the tag and put it in the tagselected div
$(this).clone().appendTo("#tagselected");
$(this).hide();

// Create an hidden input with the value of the tag selected
$('<input>').attr({
    type: 'hidden',
    name: 'tag'+count,
    value: $(this).text(),
}).appendTo('#query');

 count++ ;// adds one to the variable counter

        }

    });

//removes the tag and adds it back to #tagsdisplay    
 $("#tagselected").on('click', '.tagbutton', function () {   
                $(this).remove();
                $("#tagsdisplay").find(this).show(); //Doesn't work ...
                 count-- ;
            });

Answer 1

黑客攻击解决方案

    // Create a clone of the tag and put it in the tagselected div
    $(this).clone().appendTo("#tagselected").data('source', this);
    $(this).hide();

然后

//removes the tag and adds it back to #tagsdisplay    
$("#tagselected").on('click', '.tagbutton', function () {
    $($(this).data('source')).show();
    $(this).remove();
    count--;
});

演示：Fiddle

Answer 2

...试

//$(this).remove(); // <--get rid of this
$("#tagsdisplay").append($(this)); // <--and just move your element

查找并显示div

2 个答案: