从元素获取属性

如何解决从元素获取属性

我创建了一个对象来管理在线市场中的候选人教育

let education ={
    tabs:{},render:function(){
        document.querySelector('#education-tabs').innerHTML = ''
        let container =``;
        Object.values(this.tabs).map((tab)=>{
            container += `
            <div class="education-tab-container">
                <div class="education-tab-right">
                    <div class="big-title">   
                        ${tab.faculty}
                    </div>
                    <div class="medium-title">
                        ${tab.department}
                    </div>
                    <div class="small-title">
                        ${tab.university}
                    </div>
                </div>
                <div class="education-tab-left">
                    <div class="date">
                        ${tab.from || ''} ${tab.to || ''}
                    </div>
                    <div class="close" data-id="${tab.id}">
                        <span>x</span>
                    </div>
                </div>
            </div>
            `
        })
        document.querySelector('#education-tabs').innerHTML = container
    },deleteTab:function(id){
        delete this.tabs[id];
        this.render();
    },add:async function(payload){
        this.tabs = {...this.tabs,[payload.id]:payload}
        this.render();
    }
}

每次我向该对象添加新标签时，这都会更新 UI。
问题是当我尝试删除选项卡时：有时我会得到我创建的选项卡的 data-id 属性，有时它返回 null。

这是我的功能

const triggerListener = ()=>{
    $("#education-tabs").find(".education-tab-left .close").click((e)=>{
        if(e.target.getAttribute('data-id')){
            alert(e.target.getAttribute('data-id'))
        }
    });

那么有没有办法解决这个问题？