最初の行を除いて表の行を削除する

Question

私は、ユーザーが下の行のボタンを使って新しい表の行を追加できるようにするフォームを用意しています。私は今、テーブル行を削除するための追加のボタンを持つ機能を追加する必要があります。

私は最も簡単な方法は、使用することです集まる：

$(this).closest('tr').remove(); 

が、私はトラブル既存の機能には、この統合を抱えています。また、最初の行以外のすべての行に「削除」ボタンを表示するだけで済みます（つまり、最初の行を除くすべての行を削除できます）。私はセットアップ私の現在の機能を示し、ここでjsfiddleました：ユーザーは、「別のアクティビティを追加」ボタンをクリックしたときに、それが現在ないように私の例では、新しいテーブルの行を

http://jsfiddle.net/fmdataweb/daayf/1/

を作成する必要がありますだけでなく、その行を削除する「削除」ボタンを追加します。私は現在、「新しいアクティビティの追加」ボタンを使って作成された新しい行に対してのみ表示されるようにする方法として、最初の行に「削除」ボタンをハードコードしています。

Answer 1

いくつかの変更開始のマークアップで

、クラスaddbtnとdelbtnを追加も削除ボタン

<td> 
    <input type="button" class="button mt5 addbtn" value="Add another activity" id="button1" name="button2" /> 
</td> 
<td> 
    <input type="button" class="button mt5 delbtn" value="Delete" id="deleteRowButton" name="deleteRowButton" style="display: none"/> 
</td> 

その後

$('#lastYear').on('click', '.delbtn', function() { 
    $(this).closest('tr').remove() 
}); 

var newIDSuffix = 2; 
$('#lastYear').on('click', '.addbtn', function() { 
    var thisRow = $(this).closest('tr')[0]; 
    $(thisRow).find('.delbtn').show(); 

    var cloned = $(thisRow).clone(); 
    cloned.find('input, select').each(function() { 
     var id = $(this).attr('id'); 
     id = id.substring(0, id.length - 1) + newIDSuffix; 
     $(this).attr('id', id); 
    }); 

    cloned.insertAfter(thisRow).find('input:text').val(''); 
    cloned.find('.delbtn').hide(); 
    cloned.find("[id^=lastYearSelect]") 
    .autocomplete({ 
     source: availableTags, 
     select: function (e, ui) { 

      $(e.target).val(ui.item.value); 
      setDropDown.call($(e.target)); 
     } 
    }).change(setDropDown); 

    $(this).remove(); 
    newIDSuffix++; 
}); 

デモを隠しますこれです！あなたが他のすべての行のテンプレートとして最初の行を使用したいが、他のすべての行に削除したくないので

if($("table tr").length > 1) {
$(this).parent().parent("tr").remove(); }

Answer 2

id属性を各行に動的に追加することをお勧めします。ちょうどその方法は、idをjQueryで参照することができます。

Answer 3

どうすればよいですか？

$(this).find('tr').length > 0 ? $(this).closest('tr').remove() : ; 

Answer 4

同じクラスの「ボタンmt5」の「新しいアクティビティの追加と削除」はなぜですか？クラスの名前にスペースが許されているかどうかは不明です。

http://jsfiddle.net/yvonnezoe/nbrSR/1/こちらのテーブルを参照してください。D固定された行が上にあり、それに続く動的行が削除できます。

私の新しい行は以下のように作成されます。

var str = '<tr id="' + rowID + '">' + '<td>' + index + '</td><td>' + rowID + '</td><td class="type_row_' + textInput + '">' + type + '</td><td class="feedback number">' + textInput + '</td>' + '<td id="status_'+rowID+'"></td>' + '<td><input type="checkbox" name="CB" id="monitor_' + rowID + '" class="custom" data-mini="true" /><label for="CB"> </label></td><td class="outputRemove">x</td>' + '</tr>'; 
$('#status_table tr:last').after(str); 

削除ボタンが同じクラスを持っています。クリックすると行が削除されます。

$('#status_table').on('click', '.outputRemove', function() { 
$(this).closest('tr').remove(); 
$('#status_table tbody tr').find('td:first').text(function (index) { 
    return ++index; 
}); 

}）;

あなたはこの

<input type="button" class="button mt5 deleteButton" value="Delete" id="deleteRowButton" name="deleteRowButton" /> 

のようなボタンの特定のクラスを設定し、このjQueryの削除jqueryのに

$('.deleteButton').on('click',function(){ 
    $(this).parent().parent().remove(); 
}); 

をこのコードを追加することができます

Answer 5

:)それは何らかの形であなたを鼓舞ホープ入力の祖父であるdeleteButton Class（削除ボタン）（これは、そのボタンが配置されている行です）。

Answer 6

私はあなたがaddRowButtonに行を追加するためにあなたのButton1と改名し、その後、私はあることaddRowButtonに、より具体的には、デリゲートメソッドを変更まず

$('#lastYear').on('click', '#deleteRowButton', function(e){ 
    $(this).closest('tr').remove() 
}) 

Answer 7

あなたの[削除]ボタンをこの

をお試しください

$('#lastYear').delegate('input[type="button"]' 

からこれを好きに：

を

var checkid = $(this).attr('id').substring(0,id.length-1); 

if (checkid == 'deleteRowButto') // the 'deleteRowButto' is not a mistake 
    { 
     $(this).click(function() { 
      $(this).closest("tr").remove(); // I assign an onclick for the delete button in order to remove a specific row 
      }); 
     } 

編集：

私はいくつかの改良を加えている一度行

$('#lastYear')delegate('input[type="button"][id^="addRow"]' 

そしてデリゲートメソッド内部具体的私はそれ以下の後に追加

$(this).attr('id', id); 

後以前の追加ボタンが表示されているので、以下のコードを追加します：

var showmenow = $(this).closest("tr").prev().find("td:eq(5)").find("input[type='button']");    
$(showmenow).show(); 
      $(this).closest("tr").remove(); 
      }); 

し、代わりにあなたの元のコードでは、ボタンを除去する：

$(this).remove(); 
newIDSuffix++; 

私が代わりに非表示を使用します。

$(this).hide(); 
newIDSuffix++; 

私が作成した新しいjsfiddleを参照してください。 Fiddle

Answer 8

チェックアウト：

Answer 9

我々は唯一のjavaスクリプトの最初の挿入時に削除挿入する必要があります。このデモをチェックして、私はあなたのフィドルを修正しました。

if(cloned.find('input.mt5[value="Delete"]').length==0){ 
    cloned.find('.mt5').each(function(){ 
     cloned.append($('<td><input type="button" class="button mt5" value="Delete" id="deleteRow'+newIDSuffix+'" name="deleteRowButton" /></td>')); 
    }) 
} 

今削除イベント

を処理するための

$('#lastYear').delegate('input.button[value="Delete"]', 'click', function() { 
    var thisrow=$(this).parent().parent(); 
    var button=thisrow.find("input.button[value='Add another activity']"); 
    if(button.length>0){ 
     var buttoncell=button.parent().detach(); 
     var prevrow=thisrow.prev(); 
     var prevDelete=prevrow.find('input.button[value="Delete"]'); 
     var previd=(prevDelete.length>0)?prevDelete[0].id:'deleteRow1'; 
     buttoncell.children()[0].id=previd.replace('deleteRow','button'); 
     prevrow.find('input:text:last').parent().after(buttoncell); 
    } 
    thisrow.remove(); 
}); 

デモ：http://jsfiddle.net/vwdXD/2/あなたは右ここにある小さな見落とし以外のほとんどの部分のためにそれを持っている

Answer 10

。私はあなたのコードを修正しました。ここでそれを見つけることができます：http://jsfiddle.net/ManojRK/86Nec/。

（http://www.quickdiff.comのような）コードのDiffツールを使用して、バージョンと私のバージョンを比較することにより、変化を理解してみてください。それはあなたに多くを教えてくれるでしょう。メイド

変更：

1. 私はあなたのボタンを表示し、非表示にするスタイルを使用しています。これが唯一の方法ではありません。しかし、追加する行をクローンしているので、スタイルを使用するとJavaScriptが簡単になります。これはバグが少なく、変更の影響を受けにくいです。
2. 私はclickイベントにAdd Another ActivityとDeleteボタンを区別するためにCSSクラスを導入しました。

は、それはあなたが理解するのに役立ちます願っています。

Answer 11

私は、あなたの質問に答えるという点で、より直接的であることを期待して提供jsfiddleを使用。追加または削除ボタンが

を押された場合、削除ボタンが押された場合、その削除ボタンが最初の行（実際には第三列内に含まれるかどうかを確認、しかし

1. チェック：私が取った方法は、にしましたそれはユーザー入力を持つ最初の行です）。削除ボタンは、最初の行にある場合は、前の行での活動を追加」ボタンを作成し、クリックされたボタンの親行を削除し、削除ボタンが最初の行になかった場合は何も
2. もしません。

ステップ1：

// let's check whether they clicked the add or delete button 
    if ($(this).val() == 'Add another activity') { // if the add button was clicked 

ステップ2-3：

 if ($(thisRow).index() == 2) { // if it's the first row, don't let them delete 
      return false; 
     } else { // if it is not the first row remove this row and create an 'add' button in first row 
      $(thisRow).prev().find('td:last').prev().append('<input type="button" class="button mt5" value="Add another activity" id="button2" name="button2">'); 
      $(thisRow).remove(); 
     } 

はここでyaのためのフィドルです：http://jsfiddle.net/daayf/22/

私は助けるためにコード内でカップルのコメントを配置少し。私の編集であった。

• ライン300から307ライン275-276

が、これはアウト役に立てば幸い！

Answer 12

非常に単純な方法

function remove_point_item(th) { 
     var tr = $(th).closest("tr"); 
     var _counter=0; 
     $(tr.siblings('tr')).each(function(){ 
      _counter++; 
     }); 
     if(_counter!=1){   
     tr.remove(); 
     } 

}