ani_css ani_css - 1 year ago 176
jQuery Question

How to get javascript `this` element properties?

I have been learning javascript to get clear of the jquery that's why I'm gonna show you an example with jquery and how to write same code with js

I have to do list like this:



var addText = document.querySelector("#addText"),
addButton = document.querySelector("#addButton");


addText.addEventListener("keyup", function() {
if (addText.value.trim().length > 0) {
addButton.removeAttribute("disabled", false)
} else {
addButton.setAttribute("disabled", true);
}
});

var ul = document.createElement("ul");
addButton.addEventListener("click", function() {

var textVal = addText.value;
var li = document.createElement("li");
li.innerHTML = textVal + " - <span class='removeTodo' onclick='removeTodo()'>Remove</span>";
ul.appendChild(li);
addText.value = '';
addText.focus();
addButton.setAttribute("disabled", true);
});
document.body.appendChild(ul);

function removeTodo(event) {
//
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

<body>
<input type="text" name="" id="addText">
<input type="button" value="Add" id="addButton" disabled>
</body>

</html>





and as you see on snippet I have removeTodo() function.. I want to remove
li
which I clicked but before do this I have to ask how can I get clicked properties (id,class,text,parent,child bla bla) and how can I remove or addClass (for example) ?

it was very simple with jquery like this



$(element).on("click", function() {

$(this).attr("id");
$(this).text();
$(this).remove();
$(this).hide();
$(this).parents().attr("class");
})




Answer Source

With the method you're using - where you expect the event to be passed as an argument to the function - you can use event.target to access the clicked element. Note that you will need to amend the onclick to include the event in the arguments, though.

However, a much better solution would be to use an unobtrusive event handler on the li as you are on all the other elements in your code. Then you can use the this keyword to reference the clicked element, similar to the jQuery example in your second code block. Try this:

var addText = document.querySelector("#addText"),
  addButton = document.querySelector("#addButton");

addText.addEventListener("keyup", function() {
  addButton.removeAttribute("disabled", addText.value.trim().length == 0);
});

addButton.addEventListener("click", function() {
  var textVal = addText.value;
  var li = document.createElement("li");
  li.innerHTML = textVal + ' - <span class="removeTodo">Remove</span>';
  li.addEventListener('click', removeTodo);
  ul.appendChild(li);
  addText.value = '';
  addText.focus();
  addButton.setAttribute("disabled", true);
});

var ul = document.createElement("ul");
document.body.appendChild(ul);

function removeTodo() {
  // read properties here...
  console.log(this.innerHTML);
  
  // then remove the element...
  this.remove();
}
<input type="text" name="" id="addText">
<input type="button" value="Add" id="addButton" disabled>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download