jQueryを使用してボタンをクリックすると、divの行が削除されます

debugcn 投稿 Dev

user7544590

上の写真にあるように、xボタンがクリックされたときに行を削除しようとしています。

jQuery<div id="records"> </div>を$("#records").prepend(new_record)使用して使用するものを追加し続けるdivを作成しました。

行を実装する方法は次のとおりです。

var new_record = username + " " + $("#client-name").val() + $("#reams").val()+ " "+ "<button id='btn-sm'> x </button>"

ここで、ボタンを含むすべての部分を変数に追加しますnew_record。

ただし、各ボタンは他のボタンと同じであるため、ボタンをクリックすると、この特定の行を削除する方法に固執します。これを実装するためのより良い方法はありますか？

JasonB

行全体を識別する方法が必要になるので、各エントリをdivまたはその他の要素でラップします。次に、要素が動的に追加されるため、委任されたイベント処理を使用する必要があります-親要素のクリックを検知し、実際のソースが特定のタイプの子要素からのものであるかどうかを確認します-これはjQueryで簡単です。このスニペットは、クリックされたボタンの親divを見つけて、それを削除します。

$('#records').on('click', 'button', function() {
  $(this).parent('div').remove(); 
});

var username = "test";
var new_record = "<div>" + username + " " + $("#client-name").val() + $("#reams").val() + " " + "<button id='btn-sm'> x </button></div>";

$("#records").prepend(new_record);
$("#records").prepend(new_record);
$("#records").prepend(new_record);

$('#records').on('click', 'button', function() {
  $(this).parent('div').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="records"> </div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-9

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

jQueryを使用してボタンをクリックすると、divの行が削除されます

jQueryを使用してボタンをクリックすると、divの行が削除されます

JQueryを使用して別のボタンをクリックするとクラスが削除されます

jqueryを使用して削除ボタンをクリックすると行の背景色を変更します

チェックボックスを使用してデータの行を削除しようとしています。[削除]をクリックすると、PHPで行が削除されます。

ボタンをクリックすると、JQueryを使用してチェックボックスがオンになっているdivを表示します

jqueryを使用して別のリンクをクリックするとリンクが更新されます

Outlook 2013アドイン：c＃を使用してボタンをクリックするとリボンボタンの画像が変更されます

JqueryでTo-Doリストを作成すると、ボタンをクリックして動的に追加されたテーブル行を削除できません

Ubuntuフォルダのシンボリックリンクを削除すると、OSXとSambaを介して実行されたときにターゲットフォルダのコンテンツが削除されます

Jquery : そのdivの削除ボタンをクリックした後、ページがリロードされています

ボタンがクリックされたときに行を削除する

ボタンがクリックされたときにDIVテーブルから行を削除する

削除コマンドは機能していますが、ボタンをクリックすると空白のページが表示されます

javascriptを使用してボタンがクリックされたときにulで複数のdivのpタグのコンテンツを表示する方法

ボタンをクリックするとdivが表示されます

すべてのボタンがクリックされていることを確認します

div のラジオ ボタンをクリックすると、他の div の対応するラジオ ボタンがクリックされます。

ボタンをクリックすると、交差を削除して下の行に移動します

チェックボックスをオンにしてRecylerView行を削除すると、他の行が削除されます

jqueryを使用してボタンをクリックすると3つのdivを表示する

Jqueryを使用して多くのDIV要素が削除されたときにカウントをリセットしてクラス名を変更する方法

別のボタンがクリックされた後に作成されたボタンをクリックすると、PHPを使用して削除されるのはなぜですか？

Java Swingを使用して次のボタンをクリックすると、画像がJLabelに表示されない

1つの削除ボタンをクリックしたときに1つを除いてすべての画像が削除されるのはなぜですか？

ボタンをクリックすると、新しいボタンが表示されて機能しません

リセットボタンがクリックされたときにすべてのフィールドを削除するボタンを作成する方法。次のコードは、フィールドをリセットする代わりにアクションを実行します

Jquery-ボタンがクリックされてから削除されたときにクラスを表示します

jQueryを使用して非表示/表示ボタンをクリックするとページが再読み込みされます

jQuery-ロード時にボタンスタイルを追加し、他の人がクリックされたときにスタイルを削除します。

JQuery - 削除ボタンがクリックされた場合にテーブル行を削除する

div のラジオボタンをクリックすると、他の div の対応するラジオボタンがクリックされます。