javascript - 未捕获的类型错误：尝试更改 BG 颜色时，无法读取 null 的属性“parentNode”

Question

注意：我目前正在学习 JS，并正在尝试构建一个流程图创建器应用程序。

每个元素（矩形、圆形、椭圆形）都有一个带有“.edit”类的编辑按钮，仅在悬停在元素上时可见（参见铅笔图标）。每个元素都有一个唯一的 ID。

当单击带有“.edit”类的铅笔按钮时，它会拉出一个侧面菜单栏，可以使用 Pickr 库更改元素的背景颜色。下面是我如何监听点击和更改元素的背景颜色。

 $("document").ready(() => {
        $(".edit").click(function() {
            let id = this.id;
            document.getElementById("right-bar").style.width = "240px";
            document.getElementById("top-bar-right").style.width = "240px";
            document.getElementById("canvas").style.right = "17%";

            changeBGcolor("element" + id);
        })
    });

function changeBGcolor(something) {

const backgroundPickr = Pickr.create({
    el: '.bg-color-picker',
    theme: 'classic',
    default: $("#" + something).css("background-color"),

    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
    ],

    components: {

        preview: true,

        interaction: {
            hex: true,
            rgba: true,
            input: true,
            save: true
        }
    }
});

backgroundPickr.on('save', (color) => {

    $(`#${something}`).css("background-color", color.toHEXA().toString());
    //colorBG = color.toHEXA().toString();
})

};

<!-- Here is the HTML bit --> 
 <div id="right-bar">
    <div class="list-group customizations">
        <a href="#" class="list-group-item list-group-item-action custom-options">
            Element Background Color 
            <div class="bg-picker bg-color-change">
                <div class="bg-color-picker"></div>
            </div>
        </a>
    </div>
 </div>

当我第一次单击铅笔按钮（'.edit'）时，右侧栏会拉起，我可以很好地更改元素的背景颜色。但是，我现在面临的问题是，无论我在初始颜色更改后单击哪个元素的铅笔图标，任何新选择的颜色都仅应用于初始元素（我第一次单击铅笔按钮并进行颜色更改的元素至）。下面是在进行初始颜色更改后单击其他元素的铅笔按钮时出现的错误的屏幕截图。

PS我很抱歉没有更好地总结我的问题。英语不是我的母语，这只是我在 Stack Overflow 上提出的第二个问题。