I want to make a button that creates a p element, with an increasing id number, each time it is pressed. The p element must have a delete button that will delete only the parent element.
My problem is that although I can create the element, and delete button, the id is set to object undefined. Because of that issue it deletes the first element I created. For example if I create 5 elements I will delete element 0, then element 1 etc.
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>As always thank you in advance for your time and help and apologies if this has been asked before.
Details are commented in the example as well as what was wrong with the OP. Added a <form> and changed a few things for clarity sake. Here are some links of what was mentioned in the comments:
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>First you need to remove toString(j), just write j
And if you want to delete the specific id with the specific button then you need to pass event.
Here is a working example:
https://jsfiddle.net/7n1etxsr/1/