如何使用javascript动态添加删除块

Question

I am facing a problem while removing a paragraph, which I have added using javascript. Adding buttons work fine. The problem occurs when I try to remove the paragraph.

 function rdn_id(){return Math.random().toString(36).substring(7);} //create button function create_btn() { //Create a remove button var btn_remove = document.createElement("BUTTON"); //create a unique button ID id_btn_remove = rdn_id(); btn_remove.id = id_btn_remove ; btn_remove.textContent = "Remove file"; return [btn_remove, id_btn_remove]; } //add elt function function create_p_btn() { //Create paragraph var paragraph = document.createElement("P"); //create a unique p ID id_paragraph = rdn_id(); paragraph.id = id_paragraph; paragraph.style.paddingTop = "5px"; paragraph.style.background = "blue"; document.getElementById("setItHere").appendChild(paragraph); // add button var values = create_btn(); var btn_rmv = values[0]; var id_btn = values[1]; paragraph.appendChild(btn_rmv); document.getElementById(id_btn).addEventListener("onclick", function(){remove_func(id_paragraph);}); } //Remove function function remove_func(id_el) { var elt = document.getElementById(id_el); elt.parentNode.removeChild(id_el); }

 <div id="setItHere"> <Button id="start" onclick="create_p_btn();">add</Button> </div>

Am I missing something ? Thank you in advance.

Answer 1

You need to make two changes:

1. Event name should be click instead of onclick
2. elt.parentNode.removeChild(id_el); should be elt.parentNode.removeChild(elt);

Check out this pen https://codepen.io/tanmayv/pen/yLNwNNJ