How do I remove a newly created element in Javascript?-CodePudding

Html

<button onclick="myFunction()">Go</button>
   
    <button onclick="removeone()">
        Remove
    </button>

Javascript

This lets me go to any website in an iframe window

        function myFunction() {
            let userdata= prompt("Enter site name", "http://");
            if (userdata != null) {
                const ifrm = document.createElement("iframe");
                ifrm.setAttribute("src", userdata);
                ifrm.style.width = "1620px";
                ifrm.style.height = "880px";
                document.body.appendChild(ifrm);
            } else {}
            }

This removes the iFrame

            function removeone() {
                const iframe = document.querySelector('iframe')
                iframe.remove()`

My problem is whenever I remove the iframe, it removes the oldest element first, and not the newly created one as I want it to. I'm new to programming in JavaScript.

CodePudding user response：

Details are commented in example

// Bind "click" event to <button>
document.querySelector(".open").onclick = openIframe;

// Event handler passes event object by default
function openIframe(event) {
  // Prompt user for url
  let url = prompt("Enter site name", "https://");
  // If url isn't null...
  if (url != null) {
    // Create <iframe> and <button>
    const ifrm = document.createElement("iframe");
    const btn = document.createElement("button");
    // Add attributes and styles to both elements
    ifrm.src = url;
    ifrm.style.display = "block";
    ifrm.style.width = "98%";
    ifrm.style.minHeight = "100vh";
    btn.style.display = "block";
    btn.textContent = "Remove";
    // Append <button> then <iframe> to <body>
    document.body.append(btn, ifrm);
    // Bind "click" event to <button>
    btn.onclick = function(event) {
      // Find the element that follows <button> (ie <iframe>) and remove it
      this.nextElementSibling.remove();
      // <button> removes itself
      this.remove();
    }
  }
}

<button >GO!</button>

CodePudding user response：

Try

function removeone() {
    const n = document.querySelectorAll('iframe').length;
    const iframe = document.querySelectorAll('iframe')[n-1];
    iframe.remove();
}

Explanation

From the official documentation

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

so instead, you can use querySelectorAll. Also from the official documentation

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors

so you simply grab the last element of that NodeList and remove it. You can get the last element in a NodeList just like you would in a regular array in Javascript.