ani_css
ani_css

Reputation: 2126

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");
})

Upvotes: 0

Views: 1975

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.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>

Upvotes: 1

qiAlex
qiAlex

Reputation: 4346

innerHTML is not the best practice. You should for example add another element for span, addEventListner on it and append span to your li.

    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.innerText = textVal + ' - ';
      var span = document.createElement("span");
      span.innerText = 'Remove';
      span.className = 'removeTodo' 
      li.appendChild(span)
      ul.appendChild(li);
      span.addEventListener('click', removeTodo);
      
      
      addText.value = '';
      addText.focus();
      addButton.setAttribute("disabled", true);
    });
    document.body.appendChild(ul);

    function removeTodo(event) {
      console.log (event.target) // this is a span
      console.log (event.target.parentElement) // this is a li
      event.target.parentElement.remove(); // remove li
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!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>

Upvotes: 1

tomcek112
tomcek112

Reputation: 1626

Your event object is going to have an event.target field that will hold the DOM object you are looking for.

Upvotes: 1

Related Questions