Can`t hide html element that I generated with javascript with jquery

Question

I want to create a to do list....the add and delete buttons work but i want to delete an element when i click on it...i tried with jquery but it doesnt work when i click on the javascript generated elements, but when i test on a html element that was initial on the page it works. What is the problem ? Here is the code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap    /3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>

<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">



<div id="div1">
  <h1>To do app</h1>
  <input type="text" name="" value="" id="inp">
  <button type="button" name="button" onclick="adauga()">Adauga</button>
  <button type="button" name="button" onclick="sterge()">Sterge</button>
  <hr></hr><br>
</div>

 <h5 id="xxx">jquery</h5>

 <script>



function adauga() {
var cuvant = document.getElementById('inp').value;


var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

}

function sterge() {

var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);

}

$(document).ready(function(){
$("p").click(function(){
$("p").hide();
});
});

</script>

</body>
</html>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — rollingthedice, Jan 13 '19 at 17:41

20yco · Accepted Answer · 2019-01-13T17:40:00.953

try this one:

$(document).ready(function(){
 $("body").on("click","p", function(){
  $("p").hide();
 });
});

Snippet:

function adauga() {
var cuvant = document.getElementById('inp').value;


var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

}

function sterge() {

var parent = document.getElementById("div1");
var child = document.getElementById("z");
parent.removeChild(child);

}

$(document).ready(function(){
 $("body").on("click","p", function(){
  $(this).hide();
 });
});

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap    /3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>

<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 40px">



<div id="div1">
  <h1>To do app</h1>
  <input type="text" name="" value="" id="inp">
  <button type="button" name="button" onclick="adauga()">Adauga</button>
  <button type="button" name="button" onclick="sterge()">Sterge</button>
  <hr></hr><br>
</div>

 <h5 id="xxx">jquery</h5>

</body>
</html>

He wants to remove individual elements, I think. So it should be `$(this).hide();` or `$(this).remove();`. — Coffee'd Up Hacker, Jan 13 '19 at 17:39
@SC please, don't forget to check as answer if it wal helpful to you — 20yco, Jan 13 '19 at 18:16

score 1 · Answer 2 · answered Jan 13 '19 at 17:41

The p element doesn't exist till you click the button and run the function adauga(), so you can't bind the click event to an element that doesn't exist yet, You have to bind the click event in your adauga() function as below:

function adauga() {
var cuvant = document.getElementById('inp').value;


var para = document.createElement("p");
para.setAttribute("id","z");
var node = document.createTextNode(cuvant);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

$("p").click(function(){
$("p").hide();
});

}

or run the function when the page is ready:

$(document).ready(function(){
adauga();
 $("body").on("click","p", function(){
  $("p").hide();
 });
});

attention: hide() function doesn't remove an element just change the display to none, if you want to remove the element from your dom use remove() function instead!!!

Andy Paka · Answer 3 · 2019-01-13T18:27:09.403

0

When your code runs the event-listeners of the p-elements, your elements doesn't exist, so they aren't evected by the registering of the event-listener. You have to add the event-listener after you created the p element. Try something like:

var para = document.createElement("p");
$("#div1").on('click', 'p' function(){
   $("p").hide();
 });

edited Jan 13 '19 at 18:27

answered Jan 13 '19 at 17:40

Andy Paka

64
4

There exists the what so called `event delegation` - https://learn.jquery.com/events/event-delegation/#introduction – rollingthedice Jan 13 '19 at 17:56

Can`t hide html element that I generated with javascript with jquery

3 Answers3