Question

我有2个按钮用于创建div，另一个用于删除添加的div。添加一个新div没有问题但是当我尝试删除它时我不能使用div：eq（index）因为它没有加载DOM这里的代码

$(document).ready(function(e) {

$(".inner").eq(1).css("background-color","#0C9");
$(".inner").eq(2).css("background-color","#F00");
$(".inner").eq(3).css("background-color","#990");

$("#add").click(function(){
    $(".content").append("<div class='inner'><a href='#' class='rem'>remove this inner</a></div>"); 
});

$(document).on("click","a.rem",function(e){
    e.preventDefault();
    var num = $("a.rem").index(this);
    //alert(num);
    $(".inner").eq(num).remove();
});
});
</script>

jsfiddle上的代码：http://jsfiddle.net/7uzSv/3/

Answer 1

$('.content').on('click', 'a.rem', function(e){
  e.preventDefault();
  $(this).closest('.inner').remove();
});

这是一个不同的解决方案，但在我看来更有效。

小提琴：http://jsfiddle.net/7uzSv/2/

Answer 2

删除不存在的元素没有任何意义。

所以检查是否存在

  var num = $("a.rem").index(this);
  var checker= $(".inner").eq(num);

if(typeof checker !== 'undefined' && checker !== null) {
    $(".inner").eq(num).remove();
  }

Answer 3

试一试后，

$("#add").on("click",function(){
        $(".content").append("<div class='inner'><a href='#' class='rem'>remove this inner</a></div>"); 
    });
$(document).on("click","a.rem",function(e){
    e.preventDefault();
    $(this).parent('.inner').remove();
    });

jsfiddle

Answer 4

$("#add").click(function(){
    $(".content").append("<div class='inner'><a href='#' class='rem'>remove this inner</a></div>");

$(".inner").eq(1).css("background-color","#0C9");
$(".inner").eq(2).css("background-color","#F00");
$(".inner").eq(3).css("background-color","#990");

});

$(document).on("click","a.rem",function(e){
    e.preventDefault();
    var num = $("a.rem").index(this);
    $(".inner").eq(num).remove();
});

选择一个未加载DOM的div（我想在点击添加按钮后更改颜色）

4 个答案: