Reactjs中的jQuery:尝试动态删除()附加的<div>

我基本上想在使用jQuery的ReactJS应用上实现以下目的:我有一个图片轮播,通过单击它们,可以在其中附加一个基本的div(实际上是一个点)。目的是能够在单击的图片上发现某些东西。问题是,如果我成功附加了点,那么我希望能够在状态更改时删除转盘下一张幻灯片上的每个点。因此,点仅与第一张幻灯片有关,并且使用此代码,它们会在幻灯片和状态的更改中持续存在。

componentDidUpdate(){        
        const _ = this;

        // Declare problem (Dot on the picture)
        let target = document.querySelectorAll('.divpicRental');
        let crosshairUnit = $('<div className="targetCrosshair"></div>');
        let crosshairs = [];

        for (let k = 0; k < target.length; k++) {
        target[k].addEventListener("click", function(event){
            $('.containerRental').append(            
                crosshairUnit.css({
                    position: 'absolute',
                    top: event.pageY + 'px',
                    left: event.pageX + 'px',
                    width: '20px',
                    height: '20px',
                    background: '#1db6ff',
                    'border-radius': '50px'
                })
            );
            crosshairs.push(crosshairUnit);
            _.damageSignal(_.state.targetMode);
        })};

        // Remove problem on next Slides
        if(_.state.value !== 0){
            for(let l = 0; l < crosshairs.length; l++){
                crosshairs[l].remove()
            }
        }
    }

尽管尝试了很多东西,看来我无法使.remove()正常工作。我的'.containerRental'是包含整个轮播的div,因此显然.parent()的使用不符合我的需求(我将整个内容在下一张幻灯片中消失了)。我还尝试为轮播的每个幻灯片创建一个不同的div,但是似乎我无法在其上附加任何内容,因为它们的大小为null,并且无法使用基本的CSS解决此问题。

由于我正在寻找的答案是充分利用jQuery的.remove()方法,因此对此深有感激。

评论