Javascript 获取要附加到列表的正确$（此）元素时出现问题

我有一个div字段，当在中单击时，会创建一个下拉菜单。每当单击下拉选项选项选项时，名称将转到div字段

#建议类型
。您可以继续单击以添加其他选项

我的问题是，当我单击x以删除选项时，我不知道如何将刚才单击要删除的整个
下拉项目
重新填充到下拉列表中。现在只有x返回到选项列表中

有人有什么想法吗

另外，请有人分享一个快速的指针，告诉我当我在选项框列表外单击时，如何让它消失？不管现在发生什么，它都会留在那里



$（“#建议类型”）。单击（函数（）{
$（“#提案类型删除”）.addClass（“活动”）；
});
$（“#建议书类型”）。文本（“项目类型*”；
$（'.drop item input'）。在（'change'，function（）上{
var proposalVal=“”；
var proposalHtml=“”；
$（'.drop item input'）。每个（函数（）{
如果（$（this）.is（“：checked”））{
proposalVal+=$（this.val（）；
proposalHtml++=''+$（this.val（）++''；
$（this）.closest（'label'）.fadeOut（）；
};
//else if（$（this）.is（“：checked”）==false）{
//$（this）.closest（'label'）.fadeIn（）；
//};
$（“#提案类型”）.val（proposalVal.html（proposalHtml）；
$（“#建议类型drop”）.removeClass（'active'）；
});
//价值观
变量类型=$（'.drop项输入：选中'）.map（函数（）{
返回$（this.val（）；
}).get（）.join（'，'）；
console.log（类型）；
});
$（文档）。在（'单击'，'上。删除项关闭'，函数（）{
控制台日志（“已触发”）；
$（此）.fadeOut（“中等”，函数（）{
$（this.detach（）.appendTo（“#建议类型drop”）.fadeIn（）；
});
$（this）.is（“：checked”）==false；
$（this）.closest（'label'）.fadeIn（）；
$（this）.closest（'.drop item selected'）.fadeOut（）；
});
。面板输入{
框大小：边框框；
边框：1px实心#8585；
显示：内联块；
垂直对齐：顶部；
宽度：45%；
利润率：1.5%2%2.5%2%；
}
.提案投入{
宽度：100%；
}
#提案类型下降{
宽度：45%；
显示：无；
位置：绝对位置；
}
#建议类型-drop.active{
背景：rgba（0,0,0,1）；
显示：块；
高度：自动；
z指数：1；
}
.删除项目{
颜色：#FFF；
字号：1rem；
填充：7px 5px；
字体系列：“开放式Sans”，无衬线；
背景：rgba（0,0,0,8）；
显示：块；
宽度：100%；
光标：指针；
}
.删除项目输入{
显示：无；
}
。删除选定的项目{
背景：#0085A1；
颜色：#333333；
填充物：5px；
字体大小：.9rem；
字体大小：粗体；
字体系列：“Roboto”，无衬线；
宽度：自动；
显示：内联块；
利润率：0.3倍；
}
.删除项目关闭{
显示：内联块；
背景图像：url（“http://www.clipartbest.com/cliparts/dT8/xnA/dT8xnAqAc.png");
背景尺寸：10px 10px；
背景重复：无重复；
高度：10px；
宽度：10px；
右边距：10px；
光标：指针；
过渡：轻松0.1s；
-webkit过渡：轻松0.1s；
}

苹果
香蕉
蛋糕
这里有几个问题，我已经试着纠正了。但我应该从一开始就警告您，这让人感觉非常混乱，因为我不想尝试重写您的代码，您可能需要研究一种不同的方法，可能不使用复选框，因为它们似乎使系统过于复杂

第一期正如James在他的评论中所说的那样，您之所以只在下拉列表中显示十字架，是因为您在实际查找父对象时，使用
$（this）
选择了十字架，这可以通过
$（this）.parent（）实现

第二个问题是，在第二个问题中，您已经纠正了第一个问题，但是，您的代码不太有效，因为您现在正在将一种不包含复选框的不同类型的元素插入到您的下拉元素中，当您尝试单击它时，会导致一大堆问题。纠正这个问题的方法是像在代码的前一部分中那样插入一个新的HTML元素，然后删除列表中的旧元素。导致对
.drop item close
eventListener方法进行以下修改

$("#proposal-type-drop input[value='"+$(this).parent().text()+"']").remove();
$("#proposal-type-drop").append('<label class="drop-item">'+$(this).parent().text()+'<input type="checkbox" name="prop-type[]" class="drop-item-input" value="'+$(this).parent().text()+'"></label>').fadeIn();
$(this).parent().detach();

这是一个包含这些修改的更新版本，它应该可以按照您的预期工作。
在单击处理程序中，
此
指的是被单击的元素，即X。您应该能够使用
此
通过
$（this）.parent（）.text（）
或similar@James谢谢你的帮助。根据您的建议，我有点明白了，但是当您尝试将项目添加回选定状态时，它开始变得混乱。。此外，我似乎不知道如何删除与之关联的检查值。感谢您的帮助和精彩的解释！我真的很感谢你的帮助！
$(document).on('change', '.drop-item-input', function() {
    /* Rest of your code */
});