Javascript невозможно удалить динамически созданные элементы - PullRequest
1 голос
/ 03 февраля 2020

Я пытаюсь создать / написать обработчик событий JS, который выполняет что-то, когда изображение щелкает из списка изображений. Для этого я вставил div я нацеливаюсь и Js код в go вместе с ним. Я просто хочу, чтобы при нажатии на изображение отображалась его информация и ниже, при нажатии на второе изображение отображалась его информация (перезаписывая описание предыдущих изображений) и так далее. Мой код:

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 он создает новые и добавляет к ним. Я реализовал различные проверки, которые, если он выходит, удаляют его или очищают, но ни одна из них не работает. Любая помощь? Где я не прав?

1 Ответ

1 голос
/ 03 февраля 2020

ваш код и образ мышления немного беспорядочные. вам нужно работать с простыми методами, которые используют большинство возможностей HTML и являются масштабируемыми. если вещи становятся длинными и сложными, всегда ищите другой, более простой способ, есть вероятность, что он есть.

Я написал вам PO C того, что вы хотели бы сделать с data тегами и innerHTML:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...