Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Fruits</h1>
<ul>
<li>Apple
<button class="remove">Remove</button>
<button class="up">Up</button>
<button class="down">Down</button>
</li>
<li>Mango
<button class="remove">Remove</button>
<button class="up">Up</button>
<button class="down">Down</button>
</li>
<li>Banana
<button class="remove">Remove</button>
<button class="up">Up</button>
<button class="down">Down</button>
</li>
<li>Grapes
<button class="remove">Remove</button>
<button class="up">Up</button>
<button class="down">Down</button>
</li>
</ul>
<input type="text">
<button id = "addButton"> AddE</button>
<script src = "script.js"></script>
</body>
</html>
Script.js
let ulList = document.querySelector('ul')
let addButton = document.querySelector('#addButton')
let inputText = document.querySelector('input')
addButton.addEventListener('click', function () {
let text = inputText.value
// createElement
let newLi = document.createElement('li') // <li></li>
newLi.textContent = text
CreateButton(newLi)
ulList.appendChild(newLi)
inputText.value = ""
})
//<button class="remove">Remove</button>
//<button class="up">Up</button>
//<button class="down">Down</button>
ulList.addEventListener('click',function(event){
//console.log(event.target)
//console.log(event.target.tagName)
//console.log(event.target.className)
if(event.target.tagName === "BUTTON"){
if(event.target.className == "remove"){
let li = event.target.parentElement
let ul = li.parentElement
ul.removeChild(li)
}
else if(event.target.className == "up"){
let li = event.target.parentElement
let ul = li.parentElement
let previ = li.previousElementSibling
if(previ){
ul.insertBefore(li,previ)
}
}
else if(event.target.className == "down"){
let li = event.target.parentElement
let ul = li.parentElement
let nextLi = li.nextElementSibling
if(nextLi){
ul.insertBefore(nextLi,li)
}
}
}
})
function CreateButton(li) {
let remove = document.createElement('button')// <button></button>
remove.textContent = "Remove" // <button>Remove</button>
remove.className = "remove" // <button class = "remove">Remove</button>
li.appendChild(remove)
let up = document.createElement('button')
up.textContent = "Up"
up.className = "up"
li.appendChild(up)
let down = document.createElement('button')
down.textContent = "Down"
down.className = "down"
li.appendChild(down)
}
टिप्पण्या
टिप्पणी पोस्ट करा
आपल्या प्रतिक्रियेबद्दल धन्यवाद ! आम्ही लवकरात लवकर प्रतिक्रियेला उत्तर देण्याचा प्रयत्न करू