How do I remove a newly created element in Javascript?
Question
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.
2 answers
solution1
0 2022-10-09 00:57:23
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.
solution2
0 ACCPTED 2022-10-09 01:18:49
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 class="open">GO!</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.