refer to: https://www.udemy.com/course/the-web-developer-bootcamp/
要求点击事件进行删除操作：在下面的例子中，要求点击每一个li时就把被点击的li删除掉
如果只是单纯的定位所有的原始的li群组，遍历这个群组，然后对它进行点击事件的操作的话，只会对于已经存在的li（两个已经存在的"I AM LI"）有作用，而通过post按钮新增的li不会起作用，所以我们在这儿是直接定位到li的parent，然后选中parent的某个子节点(e.target.nodeName === 'LI')进行删除，nodeName = "P"的那个paragraph元素不会被删除，但是如果是直接e.target.remove()的话，paragraph被点击也会被删除，因为它存在于整个ul内部。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Delegation</title> </head> <body> <h1>Event Delegation</h1> <form action="/dogs" id="tweetForm"> <input type="text" name="username" placeholder="username"> <input type="text" name="tweet" placeholder="tweet"> <button>Post Tweet</button> </form> <h2>Tweets:</h2> <ul id="tweets"> <li>I AM LI!!!</li> <li>I AM LI!!!</li> <p>aslkdjaslkdjaksl</p> </ul> <script src="app.js"></script> </body> </html>
const tweetForm = document.querySelector('#tweetForm');
const tweetsContainer = document.querySelector('#tweets');
tweetForm.addEventListener('submit', function (e) {
e.preventDefault();
const usernameInput = tweetForm.elements.username;
const tweetInput = tweetForm.elements.tweet;
addTweet(usernameInput.value, tweetInput.value)
usernameInput.value = '';
tweetInput.value = '';
});
const addTweet = (username, tweet) => {
const newTweet = document.createElement('li');
const bTag = document.createElement('b');
bTag.append(username)
newTweet.append(bTag);
newTweet.append(`- ${tweet}`)
tweetsContainer.append(newTweet);
}
tweetsContainer.addEventListener('click', function (e) {
console.dir(e.target); //check the details of the e.target,can check the nodeName first
e.target.nodeName === 'LI' && e.target.remove();//只有当nodeName是LI时才会删除
})