我正在尝试制作一个按钮来创建具有特定 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