删除追加与点击

我有以下代码： HTML：删除追加与点击

<body> 
     <div> 
     <p class='Go'> 
      Create 
     </p> 
     <p class='Del'> 
     Remove 
     </p> 
     </div> 
    </body>

CSS：

.Go{ 
    background-color: lime; 
    width:45px; 
    text-align: center; 
} 
.bad{ 
    background-color:Red; 
    width: 45px; 
    text-align:center; 
} 
.Del{ 
    background-color:pink; 
    width: 55px; 
}

的Javascript（jQuery的）

$(document).ready(function(){ 
    $('.Go').click(function(){ 
     $('div').append("<p class='bad'>Delete</p>"); 
    }); 
    $('.bad').click(function(){ 
     $(this).remove(); 
    }); 
    $('.Del').click(function(){ 
     $('.bad').remove(); 
    }) 
});

的想法是，每一次我点击“创建”，它会添加一个新的“删除”。

每次我点击“删除”时，所有的“删除”都会消失，每次我点击一个“删除”时，该删除就会被删除。

除最后一个以外的所有工作。任何想法我在这里做什么错误？

来源

2017-08-22 Lucian cahil

这是因为在页面加载后'Delete'元素被添加，但'因为加载页面时，有没有'bad'的div .click'势必落空。 – tima

如果你在一个div中设置你想要删除的部分，该怎么办。所以如果你点击删除里面的所有div将被删除。 –

在这种情况下，您无法将jQuery点击绑定到尚不存在的元素。您只绑定$（document）.ready（）上的点击。解决这个问题的方法是在文档就绪功能期间将想要删除的元素绑定到存在的元素。

$('body').on('click', '.bad', function(){ 
    $(this).remove() 
})

这就是说，无论何时单击正文，如果该事件目标有一类.bad，则将其删除。这样，jQuery事件绑定正确。这里

工作例如：https://jsfiddle.net/xexhdfzw/1/

来源

2017-08-22 02:17:18 Beaut

删除追加与点击

回答

相关问题