Javascript jquery onclick父删除子操作

事实上，我真的很抱歉我的问题，我不知道如何引起注意或问这种问题

请先看我的密码

<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>

选择一种产品

产品1

P1第1项
P1第2项
P1第3项
P1第4项


产品2

P2第1项
P2第2项
P2第3项
P2第4项


产品3
产品4

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>

$（“#产品”）。单击（功能（）{
var pmodel=$（this.data（'model'）；
$（'.code1'）.empty（）.append（pmodel）；
$（'.code2'）.empty（）；
$（'.code3'）.empty（）；
});
$（“#列出li”）。单击（函数（）{
var dmodel=$（this）.data（'product'）；
$（'.code2'）.empty（）.append（dmodel）；
});
$（“#列出li ul li”）。单击（函数（）{
var item=$（this.data（'item'）；
$（'.code3'）.empty（）.append（项）；
});

您可以直接在

一切正常，但我的问题是，当我触发父列表项时，比如：产品1/产品2/产品3

结果我想清空

.code3

span

我尝试使用

$（'.code3'）.empty（）在第二个动作，但如果我使用这个，那么第三个动作我的意思是子列表点击功能不工作

请查看我的屏幕截图以清楚地了解我想要什么：
您还需要清空
.code3


$（“#产品”）。单击（函数（）{
var pmodel=$（this.data（'model'）；
$（'.code1'）.empty（）.append（pmodel）；
$（'.code2'）.empty（）；
$（'.code3'）.empty（）；
});
$（'#lists>li'）。单击（函数（e）{
e、 停止传播（）；
var dmodel=$（this）.data（'product'）；
$（'.code2'）.empty（）.append（dmodel）；
$（'.code3'）.empty（）；
});
$（“#列出li ul li”）。单击（函数（e）{
e、 停止传播（）；
var item=$（this.data（'item'）；
var dmodel=$（this）.parents（“li”）.data（“product”）；
$（'.code2'）.empty（）.append（dmodel）；
$（'.code3'）.empty（）.append（项）；
});
#产品：悬停，
李：悬停{
光标：指针
}

选择产品

产品1

P1第1项
P1第2项
P1第3项
P1第4项


产品2

P2第1项
P2第2项
P2第3项
P2第4项


产品3
产品4

当您选择第一个孩子时，是否要直接显示他的父母？我想您也要在选择第一个孩子后显示父母。否则，可以显示产品4和产品2的子项。如果要解决此问题，请告诉我。是的，我想在选择子项后显示父项，但在选择父项后，我想隐藏子项。无论如何，您的代码现在运行良好。。谢谢你的帮助。这对我来说很容易，所以我更新了代码。哇！太酷了！非常感谢您的更新。如果有一个系统可以支持10次，我会帮你做到：）你真是个天才。