2017-12-03 10 views
0

こんにちは、私は要素を作成すると変数xを使用して新しいボタンを作成する必要がある小さなWebアプリケーションを作成しています。 remove要素をクリックすると、そこに新しい要素がなくなるまで最後の要素から削除する必要があります。変数を使用して動的IDを生成し、同じ変数を使用して要素を削除する方法

しかし、問題は、私は新しい要素を削除するために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

感謝を意味します。

答えて

0

それぞれの新しい要素に共通するクラスを追加して、最後の1

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

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

+0

おかげで多くを削除するには、そのクラスでlast()フィルタを使用していますが、まだ私がいないと、IDと削除したいですクラス。 – karthikmunna

+0

どの基準に基づいていますか?ボタンと要素のグループだけがあります。どのようにクリックイベントに一致させるつもりですか? – charlietfl

+0

変数xを使用して動的IDを作成できません。変数fd1、fd2、fd3 ....を使って、要素 "$(#variable).remove;を削除する必要があります。出来ますか。 – karthikmunna

関連する問題