javascript - 从元素中获取属性

Question

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

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'))
        }
    });

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

标签： javascriptjqueryjavascript-objects