jquery onclick parent删除子操​​作

Question

其实我真的很抱歉我的问题，我不确定如何引起注意或对这类问题提出疑问。

请参阅我的代码第1页。

<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();但是如果我使用它，那么第三个动作我的意思是子列表点击功能不起作用。

请参阅我的屏幕截图，以便清楚地了解我的需求：

Answer 1

您还需要清空.code3。

＆＃13;

＆＃13;

$('#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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;