Javascript 在将元素从另一个UL动态添加到无序列表时添加图像

当我单击鼠标悬停在文本上时出现的图像时，该元素将移动到另一个位置。我需要与第一个列表中相同的图像选项来删除它。我不知道如何动态添加它。 有人能帮忙吗？提前谢谢

图像链接是：

例子
#firstlist li:hover img{display:inline；}
#firstlist li:hover{background:#CCF5CC；}
#ui选择{背景：#80B280；}
#firstlist{list样式类型：无；}
#第一个列表li{边距：3px；填充：0.3em；}
#seclist{list样式类型：无；}
#seclist li{padding:0.4em；}
img{显示：无；}
清单1
清单2

苹果
橙色的
阿瓦卡多
香蕉
芒果


$（函数（）{
$（“#firstlist”）.selective（）；
});
$（函数（）{
$（“#seclist”）.selective（）；
});
$（“.list1”）。单击（函数（）{
var text=$（this.closest（“li”）.text（）；
$（'
'，{html:text}）.appendTo（'ul.seclist'）
$（this.unbind（'click'）；
});

$（“.list1”）。单击（函数（）{
var text=$（this.closest（“li”）.text（）；
$（'
'，{html:text}）.addClass（“ui selectee”）.appendTo（'ul.seclist'）.append（“”）；
this.style.visibility='hidden'；
});
$（'ul'）。在（'click'，'list2'，函数（e）{
$（this.parent（'li'）.remove（）；
var liTwo=$（this）.closest（“li”）.text（）；
var listItems=$（“#firstlist li”）；
listItems.each（函数（li）{
var liOne=$（this.text（）；
如果（利特沃匹配（利昂））{
document.getElementById（liOne.trim（））.style.visibility='visible'；
}
});
});

而不是尝试使用

取代

var text = $(this).closest("li").text();

到

---

根据文件

：-获取匹配元素集中每个元素的组合文本内容，包括其子元素，或设置匹配元素的文本内容

：-获取匹配元素集中第一个元素的HTML内容或设置每个匹配元素的HTML内容

---

简单地说，方法

.text（）

的结果是一个字符串，而

.html（）

方法的结果是第一个匹配元素的html内容

我想在列表2中的文本旁边添加图像，就像在列表一中一样。由于

是动态添加的，我不知道如何在

标记旁边添加图像。您希望绑定到该按钮的事件是什么？您希望对该事件执行什么操作？不，是这样的。当我点击该按钮时，不得允许用户再次点击。单击一次，文本将移动到另一个列表。当用户单击另一个列表上的图像（即删除添加的任何元素）时，必须从列表2中删除文本，并且必须可以像以前一样使用未绑定（被破坏的）图像。这样，用户可以再次扫描它，点击一次后，它就会被破坏，这个过程可以重复。如果你想，我可以更新当前的代码我正在担心！但我没把你弄清楚！将项目添加到右侧列表后（单击左侧列表中项目上的按钮后），您想做什么？单击按钮时，是否要从右侧列表中删除该项目？先生，我已编辑了您的帖子。有两个功能。将列表1中选定的文本添加到列表2中并带有图像。然后，另一个用户在单击图像时删除该元素。当单击列表1上的图像时，单击的图像必须绑定，当我从列表2中移除与列表中的项目对应的项目时，必须能够再次单击。清楚吗。对不起，我英语不好。忘了提一下，我用了“可见性做我想做的事”。但是，有没有可能使用绑定和取消绑定，这样图像就会出现在那个里，但当用户点击它时，就不会有任何功能了。

$(".list1").click(function() {
                var text = $(this).closest("li").text();
                $('<li/>', {html: text}).addClass("ui-selectee").appendTo('ul.seclist').append("<img src='cancel.jpg' class = 'list2 ui-selectee'/>");
                this.style.visibility = 'hidden';
            });

            $('ul').on('click', '.list2', function(e) {
                $(this).parent('li').remove();

                var liTwo = $(this).closest("li").text();
                var listItems = $("#firstlist li");

                listItems.each(function(li) {
                    var liOne = $(this).text();
                    if(liTwo.match(liOne)){
                        document.getElementById(liOne.trim()).style.visibility = 'visible';
                    }
                });
            });

var text = $(this).closest("li").text();

var text = $(this).closest("li").html();