Remove <li> element from <ul> onclick without refreshing page

Remove <li> element from <ul> onclick without refreshing page - javascript

At the moment i need to remove an li element created by jQuery when it has been clicked.
(function() {
$(document).ready(function() {
$("#likeform").submit(function(event) {
var input = $(this).children("input[name='thing']")
var thing = $(input).val()
$("#likes").append("<li>" + thing + "</li>")
$(input).val("")
event.preventDefault()
})
})
var li = $('<li/>')
.onclick(function() {
$(this).remove()
})
}())
var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
listitems[i].onclick = this.parentNode.removeChild((this))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My New Pen!</title>
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1>What do you like?</h1>
<form id=likeform>
<input name=thing placeholder="a thing you like" size=30>
<input type=submit>
</form>
<ul id=likes></ul>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Currently this has been successful apart from i need to manually reload the page for the change to take effect

Your problem is right here:
var li = $('<li/>').onclick(function() {
$(this).remove()
});
First of all you don't need the comparison operators (<, >) as JQuery will select elements by their tag names. Also, you can't add event listeners the "normal" way on dynamically created elements.
This is discussed right here.
To fix your problem replace the above with this:
$(document).on("click", "li", function() {
$(this).remove();
});
Working example:
(function() {
$(document).ready(function() {
$("#likeform").submit(function(event) {
var input = $(this).children("input[name='thing']")
var thing = $(input).val()
$("#likes").append("<li>" + thing + "</li>")
$(input).val("")
event.preventDefault()
})
})
var li = $(document).on("click", "li", function() {
$(this).remove();
});
}())
var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
listitems[i].onclick = this.parentNode.removeChild((this))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>What do you like?</h1>
<form id=likeform>
<input name=thing placeholder="a thing you like" size=30>
<input type=submit>
</form>
<ul id=likes></ul>

I think this is essentially what you are trying to do:
$('li').each(function (i) {
$(this).click(() => $(this).remove());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</body>

would you please try following.
(function() {
$(document).ready(function() {
$("#likeform").submit(function(event) {
var input = $(this).children("input[name='thing']")
var thing = $(input).val()
$("#likes").append("<li>" + thing + "</li>")
$(input).val("")
event.preventDefault()
})
})
}())
var listitems = document.getElementsByTagName("li")
for (var i = 0; i < listitems.length; i++) {
listitems[i].onclick = this.parentNode.removeChild((this))
}
$(document).on("click", "#likes li", function(){
$(this).remove();
});

Related

Using javascript to add an image to a list and then deleting that list item when the image is clicked

Firstly I know I can make things a lot easier by creating the ul in HTML. I'm not supposed to be doing that.
My HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="body">
<form id="form" >
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
</html>
My Javascript so far:
// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML+=element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
document.getElementById('ulId').appendChild(newLi);
newLi.innerHTML=input;
}
var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseover', handlerFunction, false);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height","10");
img.setAttribute("width", "10");
document.getElementsByTagName('li').innerHTML += "img";
}
So what I'm supposed to be doing is first create a list using the listData array, and displaying it on the page. Then I take the user input and add it to the list. This part is working fine
The part I am stuck on is having to create/display an image next to each list item when it is mouseover'ed. Then having to delete that specific list item if the image is clicked. I've created the eventListener, but the img part doesn't seem to be working.

The problem is when you're appending the image to the li element.
Solution:
e.target.appendChild(img);
// Creating Array
var listData = ["Crab", "Lobster", "Scallops"];
// Creating initial List
function listFunction() {
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element) {
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML += element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
document.getElementById('ulId').appendChild(newLi);
newLi.innerHTML = input;
}
var liImg = document.getElementsByTagName('li');
for (var i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseover', handlerFunction);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src", "https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height", "10");
img.setAttribute("width", "10");
e.target.appendChild(img);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="body">
<form id="form">
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>
</html>
Hope this helps!

img is not string, it is a variable, so remove the surrounding double quotes from that. Since img is a node element, instead of using innerHTML you should use appendChild(). You also should use the e.target to refer the specific li element:
Change:
document.getElementsByTagName('li').innerHTML += "img";
To
e.target.appendChild(img);
I will suggest you to use mouseenter instead of mousemove. I think you need to attach the mouseleave event as well. You also have to attach the events to the newly created li elements.
Try the following way:
// Creating Array
var listData = ["Crab","Lobster","Scallops"];
// Creating initial List
function listFunction(){
var ul = document.createElement("ul");
ul.id = 'ulId';
document.getElementById('body').appendChild(ul);
listData.forEach(liFunction);
function liFunction(element){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML+=element;
}
}
listFunction();
// Adding user input to the list
function inputFunction() {
var input = document.getElementById("userInput").value;
listData.push(input);
var newLi = document.createElement("li");
newLi.addEventListener('mouseenter', handlerFunction, false);
newLi.addEventListener('mouseleave', removeImage, false);
document.getElementById('ulId').appendChild(newLi);
newLi.insertAdjacentHTML('beforeend', input);
}
var liImg = document.getElementsByTagName('li');
for (let i = 0; i < liImg.length; i++) {
liImg[i].addEventListener('mouseenter', handlerFunction, false);
liImg[i].addEventListener('mouseleave', removeImage, false);
}
function handlerFunction(e) {
var img = document.createElement("img");
img.setAttribute("src","https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png");
img.setAttribute("height","30");
img.setAttribute("width", "30");
img.addEventListener('click', function(){
this.closest('li').remove();
});
e.target.appendChild(img);
}
function removeImage(e){
e.target.querySelector('img').remove();
}
<body id="body">
<form id="form" >
<input id="userInput" placeholder="Enter your list item here">
<button type="button" onclick="inputFunction()">Add</button>
</form>
<script src="A4.js"></script>
</body>

Content for second div is not being alerted using $(this)

This is my full code:
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#storecipient").on('input', function() {
var thisFstchar = $(this).val();
var name = $(this).siblings(".hidbdsp").children(".hidname").html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
</script>
What my js code does is alerts the full word that contains the first letter of the word typed on the input. So when the letter "t" is typed, the word "tomato" shows up, but when "o" is typed on the input, "orange" does not show up. Even though both "orange" and "tomato" have the same class ".hidname", the $(this) selector only will select tomato but skips over orange. Why is this?

Try this
$(document).ready(function() {
$("#storecipient").on('input', function() {
var thisFstchar = $(this).val();
$(this).siblings(".hidbdsp").children(".hidname").each(function() {
var name = $(this).html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
});
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

As #misner3456 stated, jQuery.html() returns the HTML of the first matched element only. To get the HTML for all of the matched elements, try something like looping over all of the classes and appending each element's HTML to a string. For example:
let html;
$(".hidname").each(function() {
html += $(this).html();
});

You can refactor to directly iterate $(".hidbdsp .hidname").each() rather than finding the sibling.
$(document).ready(function() {
$("#storecipient").on('keyup', function() {
var thisFstchar = $(this).val();
$(".hidbdsp .hidname").each(function() {
var name = $(this).html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>

To get all children and descendant:
$('.hidbdsp *')
To get only direct children:
$('.hidbdsp > *')
.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input id="storecipient">
<div class="hidbdsp">
<div class="hidname">tomato</div>
<div class="hidname">orange</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#storecipient").on('input', function() {
var thisFstchar = $(this).val();
$('.hidbdsp *').each(function() {
var name = $(this).html();
if (thisFstchar.charAt(0) == name.charAt(0)) {
alert(name);
}
});
});
});
</script>
</body>
</html>

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

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>

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

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>

Execute javascript on load

i just want to know how to execute this [JSCODE][1] on page load, I'm a newbie and I cant figure it out. I just want to disregard the form or submit button and execute the script on page load. Thank You in advance!
[1]: http://jsfiddle.net/Noumenon72/9X3yZ/8/

Write your code inside anonymous function given below..
$(function() {
//Write your code here
})

Use jquery $(document).ready like this.
$(document).ready(function(){
//task which you want to perform
});
See you code below. I have mentioned where to call these functions.
$(document).ready(function(){
$('#domain').val('http://yourblog.blogspot.com/');
$('#get_tags').click();
});
function getTagsFromFeed(domain){
var myscript = document.createElement("script");
myscript.src = domain + "feeds/posts/summary?alt=json&max-results=0&callback=cat";
document.getElementsByTagName('head')[0].appendChild(myscript);
}
function cat(json){ //get categories of blog & sort them
var label = json.feed.category;
var lst=[];
for (i=0; i<label.length; i++){
lst[i] = label[i].term;
}
displayList(lst.sort()); //use any sort if you need that
}
function displayList(list) {
var mylist = document.getElementById("mylist");
mylist.innerHTML = "";
for (i=0; i<list.length; i++) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(list[i]));
mylist.appendChild(li);
}
urlifyTagsInList(document.forms.myform.host.value);
}
function urlifyTagsInList(hostname){
var mylist = document.getElementById("mylist");
var newlist = document.createElement("ul");
var elements = mylist.getElementsByTagName("li");
for (j=0; j<elements.length; j++) {
var link = document.createElement("a");
var blah = document.createTextNode("blah");
link.href=hostname + "search/label/" + elements[j].innerHTML;
link.appendChild(elements[j].cloneNode(true));
newlist.appendChild(link);
}
mylist.parentNode.replaceChild(newlist, mylist);
newlist.id = "mylist";
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myform" method="POST" onSubmit="getTagsFromFeed(document.forms.myform.host.value); return false;">
<p> Enter blogspot domain (http://yourblog.blogspot.com/):</p>
<input id="domain" type="text" name="host"></input>
<button id="get_tags" type="submit">Get tags</button>
</form>
<ul id="mylist">
</body>
</html>
If you want to use pure javascript, Document ready with pure JavaScript will help you.
A simple way to submit form onload is like this.
$(document).ready(function(){
$('#myForm').submit();
});

Google Places Autocomplete on dynamic inputs

Good day.
I'm trying to add Google Places Autocomplete on dynamically created inputs using code below:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
var container = document.getElementById('AutoComplInputs');
container.innerHTML += "<br>" + _id;
var _elem_for_upd = document.createElement("input");
_elem_for_upd.type = "text";
_elem_for_upd.id = _id;
container.appendChild(_elem_for_upd);
assignAutoCompl(_id);
}
</script>
</head>
<body>
<div id="AutoComplInputs"></div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
But when I press on button, autocomplete works only on last input, and all prevoius become broken. I think that it can be connected to dynamic creation of inputs, as the code below works fine:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
document.getElementById(_id).hidden = false;
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
assignAutoCompl("AutoCompl0");
assignAutoCompl("AutoCompl1");
}
</script>
</head>
<body>
<div id="AutoComplInputs">
<input id="AutoCompl0" type="text" hidden>
<input id="AutoCompl1" type="text" hidden>
</div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
I don't understand what I'm doing wrong ...

Don't use innerHTML to add content to container, you will lose all handlers bound to existing elements.
Use appendChild instead:
container.appendChild(document.createElement('br'));
container.appendChild(document.createTextNode(_id));

Develop Reference

JavaScript is the programming language of the Web.

Remove <li> element from <ul> onclick without refreshing page - javascript

I think this is essentially what you are trying to do: $('li').each(function (i) { $(this).click(() => $(this).remove()); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <ul> <li>foo</li> <li>bar</li> </ul> </body>

Related

Using javascript to add an image to a list and then deleting that list item when the image is clicked

Content for second div is not being alerted using $(this)

How to get javascript `this` element properties?

Execute javascript on load

Google Places Autocomplete on dynamic inputs

Categories

Resources