0

I'm doing an easy note creator in JavaScript, just to improve my knowledge in web development.

So, I've almost did everything: but I've a problem: 

if($("div").length != 0)
$("div").click(function() {
    for(var i = 0;i < $("div").length;i++)
{
    $("div").remove();
}
});

If I open my page and I put it in console, it works.

If I put it in my JS file, the DOM doesn't load it.

Can I know why of that?

$("button.add").click(function() {
  var text = document.querySelector("input").value;
  var x = document.createElement("div");
  x.innerHTML = text;
  document.body.appendChild(x);
});

if ($("div").length != 0)
  $("div").click(function() {
    for (var i = 0; i < $("div").length; i++) {
      $("div").remove();
    }
  });
body {
  background-color: lightblue;
  margin: 5%;
}
input,
button {
  border: none;
  padding: 10px;
  display: block;
  margin: 0 auto;
}
button {
  background-color: #fff;
  margin-top: 10px;
  opacity: 0.9;
}
input:focus {
  opacity: 0.9;
  outline: none;
}
div {
  background-color: #fff;
  padding: 5%;
  width: 10%;
  color: #ccc;
  display: inline;
  transition: 0.4s;
}
div:hover {
  background-color: #b71c1c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Matteo Notes</title>
  <link rel="stylesheet" href="C:\Users\User\Desktop\Dash\Notes\style.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>

<body>
  <input type="text" placeholder="Add...">
  <button class="add">Add</button>
  <button class="remove">Remove</button>
  <script src="script.js" type="text/javascript"></script>
</body>

</html>
Dyra
  • 1
  • 1
  • Is your code in the javascript file bracketed by $(document).ready or equivalent? – Bindrid Feb 12 '17 at 00:25
  • The answer you had below was using *"event delegation"*. Specifically, it was using an implementation of it built into jQuery, but it's a good topic to know in general, and is pretty easy to grasp, so I'd recommend doing a little Googling on that term. –  Feb 12 '17 at 00:28
  • No, it isn't. @Bindrid Ok, I'll try it. – Dyra Feb 12 '17 at 00:30
  • @charlietfl Try to type something in the box and click Add. – Dyra Feb 12 '17 at 00:31
  • @Bindrid: `.ready()` isn't the issue. The problem is that the elements are created dynamically. –  Feb 12 '17 at 00:31
  • That's why I used if ($("div").length != 0). – Dyra Feb 12 '17 at 00:32
  • Has nothing to do with `document.ready` it has to do with not being able to add event listeners to elements that don't exist yet – charlietfl Feb 12 '17 at 00:32
  • @squint Yes, I thought about it. Because when you do $("div"), jQuery doesn't load div. I don't know how to fix it. – Dyra Feb 12 '17 at 00:32
  • @Dyra: That's running before you create any elements. So if there are no divs when that code runs, no `click` handlers ever get bound. You can either bind an event handler directly when you create the element, or you can use the *event delegation* I mentioned above. –  Feb 12 '17 at 00:34
  • As mentioned...read up on "event delegation" http://learn.jquery.com/events/event-delegation/ – charlietfl Feb 12 '17 at 00:34
  • Direct binding would be like this: `x.addEventListener("click", function(event) { this.remove() })`. That's the native API. You could use jQuery too if you really want to. –  Feb 12 '17 at 00:36

0 Answers0