Reputation: 2126
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
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
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
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