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

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

一旦尝试这个，

$("#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 3

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

所以检查是否存在

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

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

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();
});