javascript - 如何使用javascript一一删除附加元素

Question

我正在尝试使用 javascript 来一一删除附加元素。我知道如何删除整个列表，但我想每次单击删除按钮时都将附加的列表一一删除，直到现在我还不知道如何解决。

这是我单击“删除”按钮时发生的情况的快速演示:-

http://jsfiddle.net/0ojjt9Lu/

JavaScript 代码:-

$(window).on('pageinit', function() {
$(document).ready(function(){
  $("#Sadd").click(function() {
        var lastId = $("#modules h1").length;
        var $newLabel = $("#module-1-label").clone();
        var $newSc = $("#module-1-scredit").clone();
        var $newSgrade = $("#module-1-sgrade").clone();
        $newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
        $newSc.find("label").attr("for", "Sc"+(lastId+1));
        $newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
        $newSgrade.find("label").attr("for", "Sgrade"+(lastId+1));
        $newSgrade.find("select").attr("name", "Sgrade"+(lastId+1)).attr("id", "Sgrade"+(lastId+1));
        $("#modules").append($newLabel, $newSc, $newSgrade);
		
        $("#Sremove").click(function() {
         $("#module-1-label").last().remove()
		 $("#module-1-scredit").last().remove()
		 $("#module-1-sgrade").last().remove()
			  
     });
    });
  });
 });

更新:- 我能够删除已附加的项目，但其中包括模块 1 并且以相反的顺序删除

例如:- 8 个模块(1、2、3 等)，它将先删除 1 和 6，然后删除 7，然后删除 8

Answer 1

每次添加模块时，都绑定(bind)删除模块按钮的点击事件。所以请绑定(bind)一次点击事件。

使用下面的代码。

 $(document).ready(function(){
    $("#Sadd").click(function() {
    var lastId = $("#modules h1").length;
    var $newLabel = $("#module-1-label").clone();
    var $newSc = $("#module-1-scredit").clone();
    var $newSgrade = $("#module-1-sgrade").clone();
    $newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
    $newSc.find("label").attr("for", "Sc"+(lastId+1));
    $newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
    $newSgrade.find("label").attr("for", "Sgrade"+(lastId+1));
    $newSgrade.find("select").attr("name", "Sgrade"+(lastId+1)).attr("id", "Sgrade"+(lastId+1));
    $("#modules").append($newLabel, $newSc, $newSgrade);
 });
 $("#Sremove").click(function() {
   var lastId = $("#modules h1").length;
   if(lastId > 5){
      var lastLi = $("#modules h1").last().closest("li");
      var lastLi2 = lastLi.next("li");
      var lastLi3 = lastLi2.next("li");
      lastLi.remove();
      lastLi2.remove();
      lastLi3.remove();   
    }
  });
});

Fiddle

希望这对您有帮助。