'I am trying to make a button that creates a p element with specific id. Problem is the id is set to object undefined

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.

javascripthtml


Solution 1:[1]

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:

HTMLFormElement

Form Controls

Events

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>

Solution 2:[2]

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/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Michael

Related Questions