Question

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

这是一个快速演示，当我点击删除按钮时发生了什么： -

javascript代码： -

＆＃13;

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

＆＃13;

更新： - 我能够删除附加但包含模块1的项目，并且它会以相反的顺序删除

例如： - 8个模块（1,2,3等）它将首先删除1和6然后它将删除7然后8

Answer 1

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

使用以下代码。

 $(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

希望这会对你有所帮助。

Answer 2

Hi Shihab现在习惯了这个Jquery代码

.last() 和 .closest() jquery code

$("#Sremove").click(function() {
    var lastLi = $("#modules li").last();
    var lastLi2 = lastLi.closest();
      var lastLi3 = lastLi2.closest();

      lastLi.remove();
      lastLi2.remove();
      lastLi3.remove();

    });

<强> Demo

<强> Updated Demo

如何使用javascript逐个删除附加的元素

2 个答案: