Hide the same values after a click

I have some values in spans of class hi and hello, and they have some similarities. For example, h1_2 and h1_4 are present in both spans. How would I go about hiding the duplicates in hello (hi_2 and hi_4) on button click?

$('.click').live('click', function () {
    var val_sp = $(".hi b").map(function () {
        return $(this).text();
    }).toArray();
    //if (.hello == val_sp) {
        $('.hello').text(val_sp).hide()
    //};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<button class="click">Click</button><p>

<span class="hi">
 <b>hi_1</b>
 <b>hi_2</b>
 <b>hi_3&开发者_如何学Clt;/b>
 <b>hi_4</b>
</span>
    
<span class="hello">    
 <b>hello_1</b>
 <b>hi_2</b>
 <b>hello_3</b>
 <b>hi_4</b>
</span>

I think you are looking for this (going by the title of your question).

$(".click").click(function(){
   $(".hi b").each(function(){
      $(".hello b:contains("+$(this).text()+")").hide();
   });
});

Working demo

I hope this is answer you wanted

http://jsfiddle.net/yyTH8/7/

$('.click').live('click', function () {
    $(".hi b").each(function(a,b){
        $(".hello:contains("+$(this).html()+")").hide();
    });
});