Adding delete button on the left side of the li item in JavaScript instead of the right side as default
Question
I created an unordered list in HTML with a delete button for each li then I went to CSS and set the button should be on the left side, I created my javascript to add automatic li items and I should also be able to delete items by clicking on the delete button. however, whenever I add a new item the new delete button is on the right side, how can I make it should be on the left side
var button = document.getElementById("enter") var input = document.getElementById("user"); var ul = document.querySelector("ul"); var li = document.querySelectorAll("li"); var clearButton = document.getElementsByClassName("clearButton"); function listItems() { return input.value.length } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); var newButton = document.createElement("button"); newButton.innerHTML = "X"; li.appendChild(newButton); input.value = ""; li.addEventListener("click", function() { li.classList.toggle("done"); }) newButton.addEventListener("click", function() { ul.removeChild(li); }) } function addItemAfterEnter() { if (listItems() > 0) { createListElement(); } } function addItemAfterKeypress(event) { if (listItems() > 0 && event.keyCode === 13) { createListElement(); } } button.addEventListener("click", addItemAfterEnter); input.addEventListener("keypress", addItemAfterKeypress) for (var i = 0; i < li.length; i++) { li[i].addEventListener("click", function() { this.classList.toggle("done"); }) } for (var i = 0; i < clearButton.length; i++) { clearButton[i].addEventListener("click", function() { this.parentNode.remove(); }) }
ul { list-style-type: none; padding: 0; width: 15rem; } li button { color: red; margin-right: .5rem; border-radius: 10px; border: none; }
<h1>Javascript event listener</h1> <input id="user" type="text" placeholder="enter item here"> <button id="enter">Enter</button> <p id="test"></p> <ul> <li class="red blue" random="26"><button class="clearButton">X</button>lettuce</li> <li><button class="clearButton">X</button>apples</li> <li><button class="clearButton">X</button>oranges</li> <li><button class="clearButton">X</button>fruits</li> <li><button class="clearButton">X</button>candy</li> </ul>
2 answers
solution1
1 2022-08-04 13:39:12
Switch the order of the append child statements.
function createListElement() {
var li = document.createElement("li");
var newButton = document.createElement("button");
newButton.innerHTML = "X";
li.appendChild(newButton);
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
li.addEventListener("click", function() {
li.classList.toggle("done");
})
newButton.addEventListener("click", function() {
ul.removeChild(li);
})
}
This should work
solution2
0 2022-08-03 22:07:40
ul {
list-style-type: none;
padding: 0;
width: 15rem;
}
li button {
color: red;
margin-right: .5rem;
border-radius: 10px;
border: none;
}
solution3
0 2022-08-03 22:10:54
in my HTML i added just a few li items, however, when ever I add random items as I created the createElement in js the button is on the right side instead of the left side as I set it up for my HTML li
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="style4.css">
</head>
<body>
<h1>Javascript event listener</h1>
<input id="user" type="text" placeholder="enter item here">
<button id="enter">Enter</button>
<p id="test"></p>
<ul>
<li class="red blue" random="26"><button class="clearButton">X</button>lettuce</li>
<li><button class="clearButton">X</button>apples</li>
<li><button class="clearButton">X</button>oranges</li>
<li><button class="clearButton">X</button>fruits</li>
<li><button class="clearButton">X</button>candy</li>
</ul>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
solution4
0 ACCPTED 2022-08-04 13:47:51
Add the button to the new li first, and then add the textNode .
var button = document.getElementById("enter") var input = document.getElementById("user"); var ul = document.querySelector("ul"); var li = document.querySelectorAll("li"); var clearButton = document.getElementsByClassName("clearButton"); function listItems() { return input.value.length } function createListElement() { // create the new li element var li = document.createElement("li"); // add the button to the li var newButton = document.createElement("button"); newButton.innerHTML = "X"; li.appendChild(newButton); // then add the text to the li li.appendChild(document.createTextNode(input.value)); input.value = ""; li.addEventListener("click", function() { li.classList.toggle("done"); }); newButton.addEventListener("click", function() { ul.removeChild(li); }); // add the constructed li to the ul ul.appendChild(li); } function addItemAfterEnter() { if (listItems() > 0) { createListElement(); } } function addItemAfterKeypress(event) { if (listItems() > 0 && event.keyCode === 13) { createListElement(); } } button.addEventListener("click", addItemAfterEnter); input.addEventListener("keypress", addItemAfterKeypress) for (var i = 0; i < li.length; i++) { li[i].addEventListener("click", function() { this.classList.toggle("done"); }) } for (var i = 0; i < clearButton.length; i++) { clearButton[i].addEventListener("click", function() { this.parentNode.remove(); }) }
ul { list-style-type: none; padding: 0; width: 15rem; } li button { color: red; margin-right: .5rem; border-radius: 10px; border: none; } /* bonus styles */ li:hover, li button:hover { cursor: pointer; }.done { text-decoration: line-through; }
<h1>Javascript event listener</h1> <input id="user" type="text" placeholder="enter item here"> <button id="enter">Enter</button> <p id="test"></p> <ul> <li class="red blue" random="26"><button class="clearButton">X</button>lettuce</li> <li><button class="clearButton">X</button>apples</li> <li><button class="clearButton">X</button>oranges</li> <li><button class="clearButton">X</button>fruits</li> <li><button class="clearButton">X</button>candy</li> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Count no of <li> in left side and right side of a particular <li> in a <ul>
Cursor positioned on the right side instead on the left
Javascript dynamically adding divs from the left side
button should delete specific item on server side
How can i align the text to right side in Textbox in Javascript… ??? By default it is left-align
My button does not move to the upper right corner from the left side via javascript DOM
Making the right side of divs line up instead of the left
Text at Left side and Right Side in HTML Page
Move an element to the right side then return to left side
How to place the slider button to the far left and right hand side of the page
Related Tags