How to replace parent div content with jQuery

Question

I have this html code:

<div id="ht_key" class="ht_all">
    <div class="ht_bottom">
        <div class="ht_bottom_p">
            <span class="ht_bottom_o">
                <a href="javascript:;" onclick="htrc('key');\">click</a>
            </span>
        </div>
    </div>
</div>

This code can be seen on the page 5-6 times (or more). I want the htrc function to replace the div #ht_key with other content. (the "key" is different in each case). The problem is that if there are 2 divs on the page with the same "key", then when the htrc function is executed, only the first div #ht_key will be replaced. Since I need to replace the contents of the div #ht_key where a was pressed (from which the htrc function is called), is there a way to replace its parent div (the parent div that has id)?

I tried both the parent and the closest, but none of them returned a result. Do you have any suggestions?

Thank!

Answer 1

, ht_key a class id.

<div class="ht_key ht_all">

, HTML .

onclick this closest() ht_all:

<a href="#" onclick="htrc(this);">click</a>

JS

htrc( el ) {
    $(el).closest('.ht_all');
    // ...
}

, HTML5 data- ht_key:

<div data-key="somekey" class="ht_all">

jQuery, :

htrc( el ) {
    var $all = $(el).closest('.ht_all');
    var key = $all.data('key');
}

Answer 2

, #ht_key ( ). "onclick" :

$("span.ht_bottom_o a").click(function(){$(this).closest(".ht_all").html(...)});