jQuery onclick父元素删除子元素操作

Question

实际上，我对于我的问题感到非常抱歉，我不确定如何引起注意或者提出这种问题。

请先查看我的代码。

<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
  <li data-product="P1">Product 1
    <ul id="sublists">
      <li data-item="it1">P1 Item 1</li>
      <li data-item="it2">P1 Item 2</li>
      <li data-item="it3">P1 Item 3</li>
      <li data-item="it4">P1 Item 4</li>
    </ul>
  </li>
  <li data-product="P2">Product 2
      <ul>
      <li data-item="it1">P2 Item 1</li>
      <li data-item="it2">P2 Item 2</li>
      <li data-item="it3">P2 Item 3</li>
      <li data-item="it4">P2 Item 4</li>
    </ul>
  </li>
  <li data-product="P3">Product 3</li>
  <li data-product="P4">Product 4</li>
</ul>
<div id="codes">
  <span class="code1"></span>
  <span class="code2"></span>
  <span class="code3"></span>
</div>

这段代码是jquery：

<script>$('#product').click(function () {
  var pmodel = $(this).data('model');
  $('.code1').empty().append(pmodel);
  $('.code2').empty();
  $('.code3').empty();
});
$('#lists li').click(function () {
  var dmodel = $(this).data('product');
  $('.code2').empty().append(dmodel);
});
$('#lists li ul li').click(function () {
  var item = $(this).data('item');
  $('.code3').empty().append(item);
});</script>

您可以直接查看此内容：http://codepen.io/alshedupur/pen/YqKGqV 一切正常，但我的问题是，当我触发父列表项时，例如：产品1 / 产品2 / 产品3

结果希望清空.code3 span。

我尝试在第二个操作上使用$('.code3').empty();，但如果我这样做，那么第三个动作即子列表点击功能就无法使用。

请查看我的屏幕截图以更清楚地了解我的要求：

- I Am Stack

Answer 1

您需要同样清空.code3。

$('#product').click(function() {
  var pmodel = $(this).data('model');
  $('.code1').empty().append(pmodel);
  $('.code2').empty();
  $('.code3').empty();
});
$('#lists > li').click(function(e) {
  e.stopPropagation();
  var dmodel = $(this).data('product');
  $('.code2').empty().append(dmodel);
  $('.code3').empty();
});

$('#lists li ul li').click(function(e) {
   e.stopPropagation();
  var item = $(this).data('item');
  var dmodel = $(this).parents("li").data('product');
  $('.code2').empty().append(dmodel);
  $('.code3').empty().append(item);
});

#product:hover,
li:hover {
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-model="ABC123" id="product">Select a Product</div>
<ul id="lists">
  <li data-product="P1">Product 1
    <ul id="sublists">
      <li data-item="it1">P1 Item 1</li>
      <li data-item="it2">P1 Item 2</li>
      <li data-item="it3">P1 Item 3</li>
      <li data-item="it4">P1 Item 4</li>
    </ul>
  </li>
  <li data-product="P2">Product 2
    <ul>
      <li data-item="it1">P2 Item 1</li>
      <li data-item="it2">P2 Item 2</li>
      <li data-item="it3">P2 Item 3</li>
      <li data-item="it4">P2 Item 4</li>
    </ul>
  </li>
  <li data-product="P3">Product 3</li>
  <li data-product="P4">Product 4</li>
</ul>
<div id="codes">
  <span class="code1"></span>
  <span class="code2"></span>
  <span class="code3"></span>
</div>

- NiZa

---

当您选择子元素作为第一个时，是否要直接显示其父级？ - NiZa

我认为您想在选择子产品后也显示其父产品。否则，可能会显示产品2的子产品与产品4一起。如果您想修复这个问题，请让我知道。 - NiZa

是的，我想在选择子项后显示父项，但在选择父项后，我想隐藏子项。无论如何，您的代码现在运行良好。感谢您的帮助。 - I Am Stack

这对我来说是一项容易的工作，所以我更新了代码。 - NiZa

哇！太酷了！非常感谢更新。如果有一个系统可以投票10次，我会为你投上的:) 你真是个天才。 - I Am Stack