Javascript 单击“附加”按钮，然后再次单击“返回”。？

无法附加功能性编写的代码。 就像单击按钮一样，它将禁用并附加到div，如果再次在div内部单击，它将隐藏并再次启用父按钮

逻辑am使用比较innerHtml值。现在问题来了，就像有相同的innerHtml值一样。 请帮忙

Array.from(document.querySelectorAll('.shadowbutton')).forEach(
(button)=>{
    button.addEventListener("click", function(e) {
        let text = e.target.innerHTML;
        let text1 = e.target.innerText;
    console.log(button)
    backbutton();
        this.disabled = true;
        $(this).addClass('disable');
        $('<button class="shadowbutton">' + text + "</button>").appendTo(dottedbox);
    })
}
)


function backbutton() {
    setTimeout(()=>{
        let dbutton = document.querySelectorAll('.dotted-box .shadowbutton');
        let parent = document.querySelectorAll('.dotted-box');
        if ( $(parent).children().length > 0 ) {
            dbutton.forEach(
                (button)=>{
                    button.addEventListener("click", (e)=> {
            console.log(button)
                        let parent = e.target.parentElement;
                        let parentdiv = document.querySelectorAll('.disable');
                        let dgfg = e.target
                        $(dgfg).removeAttr('disabled');
                        parentdiv.forEach(
                            (button)=>{
                                if(e.target.innerHTML == button.innerHTML){
                                    $(button).first().removeAttr('disabled');
                                    $(button).first().removeClass('disable');
                                }
                                else{
                                    //console.log(button)
                                }
                            }
                        )
                        parent.removeChild(e.target);
                    })
                }
            )
    }   
    },100)
}

Array.from（document.querySelectorAll（'.shadowbutton'））.forEach(
（按钮）=>{
按钮。addEventListener（“单击”，函数（e）{
让text=e.target.innerHTML；
设text1=e.target.innerText；
控制台日志（按钮）
backbutton（）；
this.disabled=true；
$（this.addClass（'disable'）；
$（''+text+''）.appendTo（dottedbox）；
})
}
)
函数backbutton（）{
设置超时（（）=>{
让dbutton=document.queryselectoral（'.dottered box.shadowbutton'）；
让parent=document.queryselectoral（'.dotterbox'）；
if（$（父）.children（）.length>0）{
dbutton.forEach(
（按钮）=>{
按钮。addEventListener（“单击”，（e）=>{
控制台日志（按钮）
让parent=e.target.parentElement；
让parentdiv=document.querySelectorAll（'.disable'）；
设dgfg=e.target
$（dgfg）.removeAttr（'disabled'）；
父分区forEach(
（按钮）=>{
if（e.target.innerHTML==button.innerHTML）{
$（按钮）.first（）.removeAttr（'disabled'）；
$（按钮）.first（）.removeClass（'disable'）；
}
否则{
//控制台日志（按钮）
}
}
)
父母。removeChild（即目标）；
})
}
)
}   
},100)
}

问题是单击时，它同时启用了按钮。它应该只启用第一个按钮。

---

您可以将当前单击的按钮存储在新创建的按钮中作为参考变量，并且您可以使用

事件获得相同的按钮新创建的按钮单击。目标

演示

let dottedbox=document.querySelector（'.dottedbox'）；
Array.from（document.queryselectoral（'.shadowbutton'））.forEach（button=>{button.addEventListener（“单击”，onButtonClick）}）
功能按钮点击（e）{
让text=e.target.innerHTML；
this.disabled=true；
$（this.addClass（'disable'）；
设btn=$（''+text+''）；
btn.on（“点击”，（e）=>{
让parent=e.target.parentElement；
让parentdiv=document.querySelectorAll（'.disable'）；
让Button=$（e.target.pBtn）；
//console.log（例如target）
buttton.removeAttr（“禁用”）；
删除类（'disable'）；
e、 target.remove（）；
});
btn[0].pBtn=e.target；
附件（点框）；
}

。虚线框{
边框：1px实心#cdcdcd；
最小高度：70px；
保证金：2rem 0；
}

P
/p
/p
P
大家好。！
大家好。！

请您尝试改进措辞好吗？我很难理解你所说的“无法附加功能性编写的代码”是什么意思。对我来说，听起来你想动态添加javascript代码，但我觉得你的意思是其他东西。请注意，如果

button

是单个元素，你不必在

$（button.first（）中使用
first（）
）

因为jQuery只包含一个元素Simple and neat