我正在嘗試制作一個按鈕來創建具有特定 ID 的 ap 元素。問題是 id 設置為對象未定義

Question

我想制作一個按鈕來創建 ap 元素，每次按下時都會增加 id 號。 p 元素必須有一個刪除按鈕，該按鈕將只刪除父元素。

我的問題是，雖然我可以創建元素和刪除按鈕，但 id 設置為對象未定義。 由於這個問題，它刪除了我創建的第一個元素。 例如，如果我創建 5 個元素，我將刪除元素 0，然后刪除元素 1 等。

 let j = 0; let btnSubmit = document.getElementById('createElement'); btnSubmit.addEventListener('click', createIdElement); let divIdElement = document.getElementById("test"); function createIdElement() { let div1 = document.createElement('div'); let paragraph = document.createElement('p'); div1.setAttribute("id", toString(j)); paragraph.innerText = "This is a new Element with id " + j; let btnDelete = document.createElement('button'); btnDelete.setAttribute("id", toString(j)); btnDelete.textContent = 'Delete'; btnDelete.addEventListener('click', deleteIdElement); div1.append(paragraph, btnDelete) divIdElement.append(div1); j++; } function deleteIdElement() { let element = document.getElementById(toString(j)); element.remove(); j--; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button type="submit" id="createElement">Create</button> <br> <div id="test"></div> <script src="mytest.js"></script> </body> </html>

一如既往地提前感謝您的時間和幫助，如果以前有人問過這個問題，我們深表歉意。

Answer 1

首先你需要刪除toString(j) ，只需要寫j並且如果你想用特定的按鈕刪除特定的 id 那么你需要傳遞事件。

這是一個工作示例：
https://jsfiddle.net/7n1etxsr/1/

Answer 2

示例中評論了詳細信息以及 OP 出了什么問題。 為了清楚起見，添加了一個<form>並更改了一些內容。 以下是評論中提到的一些鏈接：

HTMLForm元素

表單控件

活動

 let j = 0; /* HTMLFormElement interface is easier to use than other DOM interfaces. */ // This is <form id='UI'> const UI = document.forms.UI; /* Add .elements property to form object and you can reference any form control with id or name */ const IO = UI.elements; // This the <fieldset id='test'> const test = IO.test; // This is <button id='create'> IO.create.addEventListener('click', createGroup); function createGroup(event) { const div = document.createElement('div'); const par = document.createElement('p'); const btn = document.createElement('button'); /* In the OP (Original Post) the <div> was only being assigned a number as id which is invalid ids, classes, etc must start with a letter. */ div.id = 'id' + j; par.textContent = `This is a new Element with ${div.id}`; /* There's no need for id's on everything So the <button> is assigned a class which it actually isn't needed as you'll see further down */ btn.className = 'del'; btn.textContent = 'Delete'; btn.addEventListener('click', deleteGroup); div.append(par, btn) test.append(div); j++; } /* By default all event handlers (functions such as these two) pass the Event Object by default. The event obj has many useful properties, one in particular is Event.target. .target property always points to the element the user actually clicked or interacted with. */ /* So it will find the <button> the user clicked and find it's parent (div#id*) and remove it (and in doing so remove itself and it's sibling <p>) */ function deleteGroup(event) { event.target.parentElement.remove(); } /* Also, you shouldn't decrement j-- if you do then you'll end up with duplicated ids which is very invalid and problematic. */

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form id='UI'> <button id="create" type="button">Create</button> <br> <fieldset id="test"></fieldset> </form> </body> </html>

我正在嘗試制作一個按鈕來創建具有特定 ID 的 ap 元素。問題是 id 設置為對象未定義

問題描述

2 個解決方案

解決方案1
1 2022-05-10 17:59:12

解決方案2
1 已采納 2022-05-11 08:44:22

我正在嘗試制作一個按鈕來創建具有特定 ID 的 ap 元素。 問題是 id 設置為對象未定義

問題描述

2 個解決方案

解決方案1 1 2022-05-10 17:59:12

解決方案2 1 已采納 2022-05-11 08:44:22

我正在嘗試制作一個按鈕來創建具有特定 ID 的 ap 元素。問題是 id 設置為對象未定義

解決方案1
1 2022-05-10 17:59:12

解決方案2
1 已采納 2022-05-11 08:44:22