Removing and creating HTML elements with same id using Javascript

Question

I have a button that, when pressed, executes something like

function click(){
  element = document.getElementById("element");
  
  element.parentNode.removeChild(element);
  var newelement = document.createElement("div");
  body.appendChild(newelement);
  newelement.id = "element";
}

I have also tried using element.outerHTML = "" instead of removeChild with no success. Before adding the bit about deleting the previous element with the id "element" things worked fine on the first click and an div named "element" was appended to the body. (Of course, on the second click, another element named "element" is appended, and I want to keep the id unique to one element.) Now, with the bit about removing previous elements, my button.onClick doesn't even do anything.

Another important piece of context: I'm trying to do this for elements that are generated using user input, so there's no guarantee on how many of these things are made--I just want them deleted when the user wants to generate more of them.

On the first click, I'm attempting to remove an empty element. Does that break something?

Any errors in the console? Is the element being found by the `getElementById` function? Do you see it being removed in your DOM inspector? — Thomas, May 23 '18 at 18:01
So check if it exists, but I am sure the console tells you what the problem is.... — epascarello, May 23 '18 at 18:02
If there are multiple of these elements, should probably use a class as a selector. An Id should be unique to a single element on the page. When you remove the element, any bindings or references to it are likely lost as well. — Tank, May 23 '18 at 18:14
@Tank, that's a good idea, thanks. So my console says that targeting the parentNode of null is not gonna work. I suppose I could throw an if statement in there to take care of the case when there are none of these elements in play? I suppose I was hoping for a more robust solution if there is any.... Also, yeah I debugged after posting because I confused my compiler with my debugger (I'm new lol). — Dan, May 23 '18 at 18:20
I created a jsfiddle with what you have. It replaces the div with a new one. Is that the expected behavior? https://jsfiddle.net/woppyLov/ — Tank, May 23 '18 at 18:24
@Tank, yes that's a good fix for the case with one element, but since the user can create as many elements as they want with one click, creating all the elements beforehand won't be possible. I just ended up having an if statement around the removeChild line that checks if there's an element to remove. — Dan, May 23 '18 at 18:33

score 0 · Answer 1 · answered May 23 '18 at 18:24

0

body does not exist in the scope you've provided and would throw an exception. I would try:

var body = document.querySelector("body");

See this for a example using your code:

https://jsfiddle.net/k0wL4y7p/2/

Also make sure you use var on all local variables so they are not declared globally. See below to learn about variable scope:

When to use var in Javascript

answered May 23 '18 at 18:24

jac0xb.sol

56
1
3

I just used "body" as a filler because my actual code contains some ugly var names. The problem with the code was that referencing the parentNode of an empty element doesn't work, so I had to check first if the element I'm attempting to remove is empty. Is "element.remove()" a cleaner version of "element.parentNode.removeChild(element)"? – Dan May 23 '18 at 18:38

score 0 · Answer 2 · answered May 23 '18 at 20:42

How about this... don't remove the Parent Element (Div1); instead to remove the children. Then, create the child and append it to the parent element. Note: you must iterate over it to remove all child nodes & for p element id p1/p2 generate dynamic id or use class if you need it.

Your JS:

$(document).ready(function() {
  $("#btn1").click(function() {
    var element = document.getElementById("div1");
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    var para = document.createElement("p");
    var node = document.createTextNode("New element after click.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
  });
});

I prefer JQuery - no loop

$(document).ready(function(){
    $("#btn1").click(function(){
       $("#div1").empty();
       $("#div1").append(" <p>Appended element after click</p>");
    });

});

Your Html

<body>
  <div id="div1">
    <p id="p1">Paragraph element before click.</p>
    <p id="p2">Another paragraph beofre click.</p>
  </div>


  <button id="btn1">Remove </button>

</body>

Hope it helps.

Removing and creating HTML elements with same id using Javascript

2 Answers2