單擊內部 div 時獲取父 div id 名稱

Question

我正在努力尋找一種方法來獲取字符串中父 ID 的名稱。 該代碼是用 Javascript 和 jQuery 編寫的聊天應用程序的一部分。 每次有人輸入消息時，該字符串都會輸出一個包含用戶名和文本的塊，並在用戶名之前使用 Close-x 框。 當有人點擊 Close-x 時，它需要抓取父 div(json.innerdiv) 的 ID 名稱。 ID 名為 json.outterdiv 的 div 是允許我刪除整個塊消息的 ID，而 json.innerdiv 允許我刪除文本、更改文本或僅隱藏/顯示文本。 我嘗試在這里搜索答案，但我得到的只是未定義或空結果。

我的代碼：

var bubble = $('<div class="bubble-container" id="'+json.outterdiv+'"><span class="bubble"><div class="bubble-text" id="'+json.innerdiv+'"><p><div class="close-x" onclick="DelBubble(this)"></div>Some text</p></div></div>');

function DelBubble(clicked_id) {
    alert($(this).parent().attr('id'));
}

Answer 1

將event傳遞給onclick然后使用 jquery 獲取closest的class選擇器：

 var bubble = ` <div class="bubble-container" id="2"> <span class="bubble"> <div class="bubble-text" id="3"> <p> <div class="close-x" onclick="DelBubble(event)"> Close </div> Some text </p> </div> </div>`; $('body').append(bubble) function DelBubble(e) { const bubbleTextId = $(e.target).closest('.bubble-text').attr('id'); const bubbleContainerId = $(e.target).closest('.bubble-container').attr('id'); console.log({bubbleTextId,bubbleContainerId}) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>