forked from iamshaunjp/JavaScript-DOM-Tutorial
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapp.js
More file actions
39 lines (37 loc) · 1.29 KB
/
app.js
File metadata and controls
39 lines (37 loc) · 1.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const books = document.querySelector('#book-list ul')
// console.log(books)
books.addEventListener('click', (e) => {
// I used the .matches method instead of className in the chance that I want something else.
const deletebtn = e.target.matches('.delete')
if (deletebtn) {
const li = e.target.parentElement
books.removeChild(li)
}
})
let newLi = createAndAppend('li', books, null,null,undefined)
let text = createAndAppend('span', newLi, 'name', null, (e) => e.innerText = 'The Lord of The Rings')
let deletebtn = createAndAppend('span', newLi, 'delete',null,(e) => e.textContent = 'delete')
// const newLi = document.createElement('li')
// const newSpanOne = document.createElement('span')
// const newSpanTwo = document.createElement('span')
// newSpanOne.textContent = 'The Lord of the Rings'
// newSpanOne.classList.add('name')
// newSpanTwo.textContent = 'delete'
// newSpanTwo.classList.add('delete')
// newLi.append(newSpanOne)
// newLi.append(newSpanTwo)
// books.append(newLi)
function createAndAppend(tagElem, parent, className, id, cb) {
let element = document.createElement(tagElem)
parent.append(element)
if (className !== null) {
element.className = className
}
if (id !== null) {
element.id = id
}
if (cb !== undefined) {
cb(element)
}
return element
}