Javascript unable to delete dynamically created elements

Question

I am trying to make/write a JS event handler that perform somethings when image is click from a list of images. For this i have pasted the div I am targeting and Js code to go along with it. I just want that when an image is clicked it displays its info and below, when second image is clicked its info is displayed (overwriting the description of previous images) and so on. My code:

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>

Everything works except that it appends the details i.e. instead of replacing imagedescription_d & imagedescription_d2 it create new and append to them. I implemented various checks that if it exits delete it or empty it but none worked. Any help? Where I am wrong in?

You're not familiar with the DevTools? Hit F12 ...

Teemu
– Teemu

2020-02-03 06:01:48 +00:00
Commented Feb 3, 2020 at 6:01 — Teemu
– Teemu, Commented Feb 3, 2020 at 6:01

Matan Sanbira · Accepted Answer · 2020-02-03 07:15:50Z

1

your code and way of thinking are a bit messy. you need to work with simple methods that utilize the most of the HTML capabilities and is scalable. if things get long and complicated always search for another simpler way, chances are there is one.

I wrote you a POC of what you wanted to happen with data tags and 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>

answered Feb 3, 2020 at 7:15

Matan Sanbira

1,55310 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tsu90280 Over a year ago

ok i did it, as you suggested and it works, but there is a problem that in DreamWeaver I am unable to run my js but every where else it runs eg vs code webstrom etc. any idea why it is doing that

Collectives™ on Stack Overflow

Javascript unable to delete dynamically created elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related