Question

您好我正在创建一个小型Web应用程序，如果我单击创建元素，它应该使用变量x创建新按钮。当我单击remove元素时，它应该从最后一个元素中删除，直到不存在新元素。

但问题是，当我点击创建元素时，我无法动态地向新创建的元素添加id。同时我如何删除使用变量作为id来删除新元素。

此处元素表示按钮

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
var x=1;
var fd,d;
$(document).ready(function(){

$("#r").click(function(){
$("#fd").remove();

});

$("#c").click(function(){

var txt="<div id='fd"+x+"'><button > New Button </button></div>";
x++;
$("#d").after(txt);

});
});
</script>
</head>
<body>
<button id="c">Create Element</button>
<button id="r">Remove Element</button>
<br> <br>
<div id="fd">
<button id="d">First Element</button>
</div>
<br>
</body>
</html>

I have included the image where i am able to create new element but not able to delete it

提前致谢。

Answer 1

为每个新元素添加一个公共类，然后对该类使用last()过滤器删除最后一个

＆＃13;

var x = 1;
var fd, d;
$(document).ready(function() {

  $("#r").click(function() {
    $(".button").last().remove();

  });

  $("#c").click(function() {

    var txt = "<div class='button' id='fd" + x + "'><button > New Button </button></div>";
    x++;
    $("#d").after(txt);

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="c"> Create Element </button>
<button id="r"> Remove Element </button> <br>
<br>
<div id="fd">
  <button id="d"> First Element </button>
</div>
<br>

＆＃13;

如何使用变量生成动态id并使用相同的变量删除元素

1 个答案: