JavaScriptで引数が２つあるケースの対処方法を教えてください。

Question

###目的
次のHTMLで
➀ .closeをクリックしたら
➁ その先祖の.colorからdata属性を取得して
➂ その子孫の.target_➁を削除する
という操作を考えています。

<section>

  <div class="color" data-color="red">
    <span class="close">close1</span>
    <p class="target_red">target1</p>
  </div>
  
  <div class="color" data-color="blue">
    <span class="close">close2</span>
    <p class="target_blue">target2</p>
  </div>  
  
</section>  

###当該のコード
たとえば次のように書けば似たようなことができるのですが、

function Close(target){
	$(target).find('p').fadeOut();  
}

$('.close').on('click', function(){
	Close( $(this).closest('div') );
}); 

しかし
find('p')ではなくて、
find('.target_red')やfind('.target_blue')としたい
わけです。

イメージとしては次のような感じなのですが、これでは出来ませんで…

function Close(target, color){
	$(target).find('.target_'+color).fadeOut();  
}

$('.close').on('click', function(){
	Close( $(this).closest('div') );
	Close( $(this).closest('div').attr('data-color') ); 
}); 

以上のようなケースではどのように対処すべきでしょうか？

Answer 1

var color = $(this).closest('div')
Close( color, color.attr('data-color') );

これではどうでしょうか？