问题获取正确的 $(this) 元素以附加到列表

Question

我有一个 div 字段，单击该字段会创建一个下拉菜单。每当您单击下拉选项选项时，名称将转到 div 字段 #proposal-type。您可以继续单击以添加其他选项选择。

我的问题是，当我点击 x 删除选择时，我无法弄清楚如何将刚刚点击的整个 drop-item 删除并填回下拉列表.现在只有 x 返回选项列表。

有没有人有什么想法？

此外，有人可以分享一个快速指南，说明当我在选项框列表外部单击时如何让选项框列表消失吗？无论现在发生什么，它都会一直存在。

$('#proposal-type').click(function() {
  $('#proposal-type-drop').addClass('active');
});
$('#proposal-type').text("Type of Project *");
$('.drop-item-input').on('change', function() {
  var proposalVal = "";
  var proposalHtml = "";
  $('.drop-item-input').each(function() {
    if ($(this).is(":checked")) {
      proposalVal += $(this).val();
      proposalHtml += '<div class="drop-item-selected"><span class="drop-item-close"></span>' + $(this).val() + '</div>';
      $(this).closest('label').fadeOut();
    };
    //else if ($(this).is(":checked") === false) {
    // $(this).closest('label').fadeIn();
    //};
    $('#proposal-type').val(proposalVal).html(proposalHtml);
    $('#proposal-type-drop').removeClass('active');
  });
  //values
  var type = $('.drop-item-input:checked').map(function() {
    return $(this).val();
  }).get().join(', ');
  console.log(type);
});
$(document).on('click', '.drop-item-close', function() {
  console.log("Triggered");
  $(this).fadeOut("medium", function() {
    $(this).detach().appendTo('#proposal-type-drop').fadeIn();
  });
  $(this).is(":checked") === false;
  $(this).closest('label').fadeIn();
  $(this).closest('.drop-item-selected').fadeOut();
});

.panel-input {
  box-sizing: border-box;
  border: 1px solid #858585;
  display: inline-block;
  vertical-align: top;
  width: 45%;
  margin: 1.5% 2% 2.5% 2%;
}

.proposal-input {
  width: 100%;
}

#proposal-type-drop {
  width: 45%;
  display: none;
  position: absolute;
}

#proposal-type-drop.active {
  background: rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  z-index: 1;
}

.drop-item {
  color: #FFF;
  font-size: 1rem;
  padding: 7px 5px;
  font-family: 'Open Sans', sans-serif;
  background: rgba(0, 0, 0, .8);
  display: block;
  width: 100%;
  cursor: pointer;
}

.drop-item-input {
  display: none;
}

.drop-item-selected {
  background: #0085A1;
  color: #333333;
  padding: 5px;
  font-size: .9rem;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  width: auto;
  display: inline-block;
  margin: 0 3px;
}

.drop-item-close {
  display: inline-block;
  background-image: url("http://www.clipartbest.com/cliparts/dT8/xnA/dT8xnAqAc.png");
  background-size: 10px 10px;
  background-repeat: no-repeat;
  height: 10px;
  width: 10px;
  margin-right: 10px;
  cursor: pointer;
  transition: ease 0.1s;
  -webkit-transition: ease 0.1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-input">
  <div id="proposal-type" class="proposal-input"></div>
  <div id="proposal-type-drop">
    <label class="drop-item">Apple<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Apple"></label>
    <label class="drop-item">Banana<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Banana"></label>
    <label class="drop-item">Cake<input type="checkbox" name="prop-type[]" class="drop-item-input" value="Cake"></label>
  </div>
</div>

Answer 1

这里有一些问题，我已尝试更正。不过，我应该一开始就警告你，这感觉很乱，因为我不想尝试重写你的代码，你可能想研究一种不同的方法，也许不使用复选框，因为它们似乎会使系统过于复杂。

第一期正如 James 在他的评论中所说的那样，你只在下拉列表中看到十字架的原因是因为选择了 $(this) 当你实际寻找 parent 时，可通过 $(this).parent().

实现

第二个问题是在你的第二个JSFiddle中，你已经纠正了第一个问题，但是，你的代码并不完全有效，因为你是现在将不包含复选框的不同类型的元素插入到 drop-down 元素中，当您尝试单击它时会导致一大堆麻烦。纠正此问题的方法是插入一个新的 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();

这让我们进入了第三个问题，因为现在我们已经生成了一个新元素，它在 drop-down 列表中看起来不错，但是，它不会响应您之前的 .drop-item-input eventListener。我们需要修改此侦听器以通过以下方式处理动态添加的元素；

$(document).on('change', '.drop-item-input', function() {
    /* Rest of your code */
});

这是包含这些修改的更新 JSFiddle，它应该可以按您的预期工作。

问题获取正确的 $(this) 元素以附加到列表

Issue getting correct $(this) element to append to a list

javascript

jquery

append

detach