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/Product 2/Product 3

結果我想清空.code3span

我試着在第二個動作上使用$('.code3').empty();，但是如果我使用這個，那麼第三個動作我的意思是子列表點擊功能不起作用。

請參閱我的屏幕截圖清楚地瞭解我想要什麼：

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>