JS初学者请前辈指点下啊 谢谢 用JS做出以下功能,翻了资料看,还是不明白到底用什么代码来实现如下的功能。当鼠标滑过某一li时, 在其li文本后面出现一个超链接,点击链接可删除对应的这个li,求解答~~~在此谢过了<ul> <li>li列表1</li> <li>li列表2</li> <li>li列表3</li></ul> 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 或许我这个比你现在这个要求更复杂一点,思路在放开一点,步子在迈得大一点:http://www.cnblogs.com/jikey/archive/2013/03/08/2950900.html LZ的例子,对于,你的这个问题,是有点复杂了,你自己简化一下应该就OK了只要使用好node.parentNode.removeChild(node);这个应该就可以实现了。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script> function init(){ var li=document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ li[i].onmouseover=function(){ if(this.getElementsByTagName("a").length<1){ var a=document.createElement("a"); a.setAttribute("href","#"); a.innerHTML="delete"; this.appendChild(a); a.onclick=function(){ var p=this.parentNode; var pp=p.parentNode; pp.removeChild(p); } } } } } window.onload=init;</script></head><body><ul> <li>li列表1</li> <li>li列表2</li> <li>li列表3</li></ul> </body></html>这样试试 我是在自学,还没有接触到jquery,现在才到dom元素这里....... <ul> <li>li列表1</li> <li>li列表2</li> <li>li列表3</li></ul> <script type="text/javascript">window.onload = function(){ var lis = document.getElementsByTagName('li'); var len = lis.length; for(var i=0;i<len;i++){ lis[i].onmouseenter = function(){ var a = document.createElement('a'); a.innerHTML = '删除'; a.id = 'delete'; this.appendChild(a); a.onclick = function(){ var parent = this.parentNode; parent.parentNode.removeChild(parent); } } lis[i].onmouseout = function(e){ e = e || window.event; var tar = e.relatedTarget || e.toElement; var a = document.getElementById('delete'); if(tar==a) return; if(a){ this.removeChild(a); } } }}</script>用jQuery比较简单。 原生JS可以像我下面这样写,但是Chrome不支持mouseleave&mouseenter,所以最好还是用JQ实现吧。<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <script type="text/javascript"> function init() { //获取所有li var li_list = document.getElementsByTagName("li"); //给li绑定mouseover&mouseleave事件 var the_a; for(var i=0;i<li_list.length;i++) { li_list[i].onmouseenter = function(event) { the_a = document.createElement("a"); the_a.href = "#" ; the_a.innerHTML = "删除"; //删除其从属父节点 the_a.onclick = function(event) { event.target.parentNode.parentNode.removeChild(event.target.parentNode); } event.target.appendChild(the_a); } li_list[i].onmouseleave = function(event) { var the_child = event.target.firstChild; //获取最后一个子节点即a while(the_child.nextSibling) { the_child = the_child.nextSibling ; } event.target.removeChild(the_child); } } } </script> </head><body onload="init();"><ul><li>li列表1</li><li>li列表2</li><li>li列表3</li></ul> </body></html> <ul id='ul'> <li>123</li> <li>456</li> <li>789</li> </ul> <style text='text/css'> #ul>li>.del{display:none;} #ul>li:hover>.del{display:inline;} </style> <script type="text/javascript"> var ul = document.getElementById('ul'), li, a = document.createElement('a'); a.innerText = '删除'; a.className='del'; ul.onmouseover = function (e) { if (e.target.tagName == 'LI') { li = e.target; if (!li.a) { li.a = a.cloneNode(true); li.appendChild(li.a); } } } ul.onclick = function (e) { if (e.target.className == 'del') { this.removeChild(e.target.parentNode); } } </script>javascript+css 只绑定了 两 个事件 还是写在 onload 中,javascript + css 的好处是 不用去处理冒泡事件<script type="text/javascript"> window.onload = function () { var ul = document.getElementById('ul'), li, a = document.createElement('a'); a.innerText = '删除'; a.className = 'del'; ul.onmouseover = function (e) { if (e.target.tagName == 'LI') { li = e.target; if (!li.a) { li.a = a.cloneNode(true); li.appendChild(li.a); } } } ul.onclick = function (e) { if (e.target.className == 'del') { this.removeChild(e.target.parentNode); } } } </script> 怎么在更多下,加一个类似下拉框的效果? 重复调用的问题 正则,找第二列的数据 请问 $ 代表什么呢。。红色标注的代码段是什么意思呀 请问这句话起什么作用 滤镜的问题 如何让客户在地图图片上用鼠标自定义热区(销售点,因为会经常变化),并将热区坐标存入数据库中,希望用javascript和asp配合实现。 一个非常有挑战的Javascript问题!!!!!!!!!!!!!!! 关于日期的输入的问题请教 SSI+JSP问题 不知道什么原因 求助!! Extjs 4.1.1a 日历控件 JS控制的图片切换 如何停止切换
http://www.cnblogs.com/jikey/archive/2013/03/08/2950900.html
只要使用好node.parentNode.removeChild(node);这个应该就可以实现了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function init(){
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
if(this.getElementsByTagName("a").length<1){
var a=document.createElement("a");
a.setAttribute("href","#");
a.innerHTML="delete";
this.appendChild(a);
a.onclick=function(){
var p=this.parentNode;
var pp=p.parentNode;
pp.removeChild(p);
}
}
}
}
}
window.onload=init;
</script>
</head><body>
<ul>
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
</body>
</html>
这样试试
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName('li');
var len = lis.length;
for(var i=0;i<len;i++){
lis[i].onmouseenter = function(){
var a = document.createElement('a');
a.innerHTML = '删除';
a.id = 'delete';
this.appendChild(a);
a.onclick = function(){
var parent = this.parentNode;
parent.parentNode.removeChild(parent);
}
}
lis[i].onmouseout = function(e){
e = e || window.event;
var tar = e.relatedTarget || e.toElement;
var a = document.getElementById('delete');
if(tar==a) return;
if(a){
this.removeChild(a);
}
}
}
}
</script>用jQuery比较简单。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script type="text/javascript">
function init()
{
//获取所有li
var li_list = document.getElementsByTagName("li");
//给li绑定mouseover&mouseleave事件
var the_a;
for(var i=0;i<li_list.length;i++)
{
li_list[i].onmouseenter = function(event)
{
the_a = document.createElement("a");
the_a.href = "#" ;
the_a.innerHTML = "删除";
//删除其从属父节点
the_a.onclick = function(event)
{
event.target.parentNode.parentNode.removeChild(event.target.parentNode);
}
event.target.appendChild(the_a);
}
li_list[i].onmouseleave = function(event)
{
var the_child = event.target.firstChild;
//获取最后一个子节点即a
while(the_child.nextSibling)
{
the_child = the_child.nextSibling ;
}
event.target.removeChild(the_child);
}
} }
</script>
</head><body onload="init();">
<ul>
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
</body>
</html>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<style text='text/css'>
#ul>li>.del{display:none;}
#ul>li:hover>.del{display:inline;}
</style>
<script type="text/javascript">
var ul = document.getElementById('ul'), li, a = document.createElement('a');
a.innerText = '删除';
a.className='del';
ul.onmouseover = function (e) {
if (e.target.tagName == 'LI') {
li = e.target;
if (!li.a) {
li.a = a.cloneNode(true);
li.appendChild(li.a);
}
}
}
ul.onclick = function (e) {
if (e.target.className == 'del') {
this.removeChild(e.target.parentNode);
}
}
</script>
javascript+css 只绑定了 两 个事件
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementById('ul'), li, a = document.createElement('a');
a.innerText = '删除';
a.className = 'del';
ul.onmouseover = function (e) {
if (e.target.tagName == 'LI') {
li = e.target;
if (!li.a) {
li.a = a.cloneNode(true);
li.appendChild(li.a);
}
}
}
ul.onclick = function (e) {
if (e.target.className == 'del') {
this.removeChild(e.target.parentNode);
}
}
}
</script>