Javascript 无法删除动态创建的元素

Question

我正在尝试 make/write 一个 JS 事件处理程序，它在从图像列表中单击图像时执行某些操作。为此，我粘贴了我的目标 div 和 Js 代码。我只希望在单击图像时显示其信息，在单击第二个图像时显示其信息（覆盖先前图像的描述）等。我的代码：

window.onload = function () {
    var links = document.getElementsByClassName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function (e) {
            // Hide results
            document.getElementById('placeholder').style.display = 'none';

            // Show loader
            document.getElementById('loading').style.display = 'block';

            if (document.getElementById('imagedescription')) {
                // imagedescription = document.getElementById('imagedescription')
                // placeholder.parentNode.removeChild(imagedescription)
                document.getElementById('imagedescription').style.display = 'none'
            }
            setTimeout(() => showpic(this), 2000);
            e.preventDefault();
        });
    }

    function showpic(pic) {
        document.getElementById('loading').style.display = 'none';
        var imagedescription = document.createElement('div');
        imagedescription.setAttribute('id', 'imagedescription');
        var desctext = document.createTextNode('');
        imagedescription.appendChild(desctext);
        document.getElementById('placeholder').style.display = 'block';
        var source = pic.getAttribute('href');
        var placeholder = document.getElementById('placeholder');
        placeholder.setAttribute('src', source);

        if (pic.getAttribute('title')) {
            var text = pic.getAttribute('title');
        } else {
            var text = '';
        }

        if (text == "1") {
            prob = '1'
            aces = 1
            arks = 5
            results = {
                something:'55',
                something1:'44',
                something2:'556'
            }
        } else if (text == "2") {
            prob = '1'
            aces = 1
            arks = 5
            results = {
                something:'55',
                something1:'44',
                something2:'556'
            }
        } else if (text == "3") {
            prob = '1'
            aces = 1
            arks = 5
            results = {
                something:'55',
                something1:'44',
                something2:'556'
            }
        } else if (text == "4") {
            prob = '1'
            aces = 1
            arks = 5
            results = {
                something:'55',
                something1:'44',
                something2:'556'
            }
        } else {
            prob = 'Probability 95%'
            faces = 1
            landmarks = 5
            results = {
                nose: '(303, 131)',
                mouth_right: '(313, 141)',
                right_eye: '(314, 114)',
                left_eye: '(291, 117)',
                mouth_left: '(296, 143)'
            }

        }

        test = `<button type="button" class="btn btn-primary" style="margin-right: 10px;"> <span class="badge">${prob}</span></button> <button type="button" class="btn btn-success" style="margin-right: 10px;">aces <span class="badge">${aces}</span></button><button type="button" class="btn btn-danger">arks <span class="badge">${arks}</span></button><br /> <span class="badge badge-info">something: ${results.something}</span> <br />  <span class="badge badge-info">something1: ${results.something1}</span> <span class="badge badge-info">something2: ${results.something2}</span> <br /> <span class="badge badge-info">something2: ${results.something2}</span> <span class="badge badge-info">Lefted: ${results.something}</span> <br />`
        test1 = ``



        var imageDescription_d = document.createElement('div');
        imageDescription_d.setAttribute("id", "imageDescription_d");

        var imageDescription_d2 = document.createElement('div');
        imageDescription_d2.setAttribute("id", "imageDescription_d2");

        if (imagedescription.firstChild.nodeType == 3) {

          imagedescription.firstChild.nodeValue = text;
          imageDescription_d.innerHTML = test
          imageDescription_d2.innerHTML = test1



        }

        // imageDescription_d2.innerHTML = test1
        placeholder.parentNode.appendChild(imagedescription);
        imagedescription.parentNode.insertBefore(imageDescription_d, imagedescription.nextSibling);
        imageDescription_d.parentNode.insertBefore(imageDescription_d2, imageDescription_d.nextSibling);
        return false;
    }
    }

#loading {
    display: none;
}
#imagegallery {
    display: inline-block
}
#results {
    display: none;
}

<div id="content">
                            <h3>Select Images Below</h3>
                            <ul id="imagegallery" , style="padding-bottom: 20px;">
                                <li>
                                    <a class='a' href="./img/team/t1.jpg" title="Black Man in Glasses" onclick="" style="padding-right: 10px;
                                        padding-left: 95px;">
                                        <img src="./img/team/t1.jpg" height="75px" width="75px"
                                            alt="the band in concert" />
                                    </a>
                                </li>
                                <li>
                                    <a class='a' href="./img/team/t2.jpg" title="White Man in Glasses"
                                        style="padding-right: 10px;">
                                        <img src="./img/team/t2.jpg" height="75px" width="75px" alt="the bassist" />
                                    </a>
                                </li>
                                <li>
                                    <a class='a' href="./img/team/t3.jpg" title="Brown Women"
                                        style="padding-right: 10px;">
                                        <img id='image' src="./img/team/t3.jpg" height="75px" width="75px"
                                            alt="the guitarist" />
                                    </a>
                                </li>
                                <li>
                                    <a class='a' href="./img/team/t4.jpg" title="White Women"
                                        style="padding-right: 10px;">
                                        <img id='image' src="./img/team/t4.jpg" height="75px" width="75px"
                                            alt="the audience" />
                                    </a>
                                </li>
                            </ul>
                            <div>
                                <img id='placeholder' , src="./img/resources/neutral_1.jpg" , height="450px"
                                    width="550px" alt="Image gooes here" , style="margin-bottom: 50px;padding: 10px;">
                            </div>
                            <div id="loading">
                                <img src="img/loading.gif" height="450px" width="550px" alt="">
                            </div>
                            <!-- <div id="show">
                                <h1 id='h'>It works</h1>
                            </div> -->
                        </div>

                    </div>

一切正常，只是它附加了细节，即它不是替换 imagedescription_d 和 imagedescription_d2，而是创建新的并附加到它们。我实施了各种检查，如果它退出删除它或清空它但 none 工作。有什么帮助吗？我哪里错了？

Answer 1

你的代码和思路有点乱。您需要使用能够充分利用 HTML 功能且可扩展的简单方法。如果事情变得又长又复杂，总是寻找另一种更简单的方法，很可能有一个。

我用 data 标签和 innerHTML:

给你写了你想要发生的事情的 POC

const description = document.querySelector(".description");
const descriptions = {
  img0: "hay im text",
  img1: "hay im anouther text"
};

document.addEventListener("click", (e) => {
  if (e.target.getAttribute("data-description")) {
    description.innerHTML = "loading";
    setTimeout(() => {
      description.innerHTML = descriptions[e.target.getAttribute("data-description")];
    }, 2000);
  }
});

.img-btn {
  margin: 10px;
  color: blue;
  cursor: pointer;
}

.description {
  margin: 10px;
}

<div class="img-btn" data-description="img0">img 1</div>
<div class="img-btn" data-description="img1">img 2</div>

<div class="description"></div>

Javascript 无法删除动态创建的元素

Javascript unable to delete dynamically created elements

html

javascript

css

event-handling

dom-events