Question

params

问题出在哪里          //等待文档加载     window.onload = function（）{    愚蠢的红色框说我的代码太多了，太烦人了！
    // UI元素处理程序
    var donut = document.querySelector（'＃grid'）;

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Events</title



<style>
ul {
margin:0px auto;
width:700px;
height:600px;
position:relative;
cursor:pointer;

border:black;*/
}
li {
width:200px;
height:200px;
background:black;
display:inline-block;
}

#red {
background:red;
}
#green{
background:green;
}
#blue {
background:blue;
}
#orange{
background:orange;
}
#purple{
background:purple;
}
#pink {
background:pink;
}
#silver {
background:silver;
}
#gold{
background:gold;
}
#black {
background:black;
}
</style>
</head>
<body>
<ul id="grid">
<li alt="red1" class="red"  id='red' ></li>

<a href="http://www.google.com"><li id="orange"></li></a>

<li id="silver"></li>

<li alt="green machine"  id="green"></li>

<li id="gold"></li>

<li id="purple"></li>

<li id="pink" alt="pink"></li>

<li id="blue"></li>

<li id="black"></li>
</ul>

Answer 1

var donut = document.querySelector('#grid');

donut.addEventListener('click', function (e) {  
    e.preventDefault();

    if (e.target.tagName === 'LI') {
         e.target.remove();
    }
} , false);

<强> http://jsfiddle.net/sq48dv7j/

如何在点击时保持我的ul元素不会消失？

1 个答案: