テーブルの動的行を削除するにはどうすればよいですか？

Question

私は jquery append and remove dynamic table row （http://jsfiddle.net/samliew/3AJcj/2/）

からのコードを以下のよ、私はすでに私のテーブルを組織しました。 しかし、削除機能が動作しませんでしたが、このコードをどのように変更するのですか？ $(this).parent().parent().remove();コードについてはわかりません。

$(document).ready(function(){ 
 
\t $(".addCF").click(function(){ 
 
\t \t $("#addTg").after('<tr><td class="tg-yw4l" ><input type="text"></td><td class="tg-yw4l" colspan="2" ><input type="text"></td><td class="tg-yw4l" ><input type="text"></td><td><a href="javascript:void(0);" class="remCF" >Remove</a></td></tr>'); 
 
\t }); 
 
\t  $("#addTg").on('click','.remCF',function(){ 
 
\t   $(this).parent().parent().remove(); 
 
\t  }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="tg"> 
 
    <tr> 
 
    <td class="tg-mtwr">DATE</td> 
 
    <td class="tg-mtwr" colspan="2" >CONTENTS</td> 
 
    <td class="tg-mtwr">PRICE</td> 
 
    <td class="tg-mtwr">BUTTON</td> 
 
    </tr> 
 
    <tr id="addTg"> 
 
    <td class="tg-yw4l" ><input type="text"></td> 
 
    <td class="tg-yw4l" colspan="2" ><input type="text"></td> 
 
    <td class="tg-yw4l" ><input type="text"></td> 
 
    <td class="tg-yw4l"></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="5" style="border:0px solid #fff;"> 
 
    
 
    </td> 
 
    </tr> 
 
</table> 
 
<button onclick="myFunction()" class="addCF" >Add</button>

Answer 1

動的に追加された要素は、要素の兄弟である#addTg内部ありません。親テーブルクラスセレクタのセレクタを変更してください。ハンドラthisインサイド

がクリックされたDOMオブジェクトを参照し、parent()方法は、要素の親を取得するために使用されます。 closest()を使用して要素を単純化することができます。この方法では、祖先を通過して要素を取得します。

myFunctionはコードに定義されていませんが、ここでは不要なボタンからonclick="myFunction()"を削除してください。

$(document).ready(function() { 
 
    $(".addCF").click(function() { 
 
    $("#addTg").after('<tr><td class="tg-yw4l" ><input type="text"></td><td class="tg-yw4l" colspan="2" ><input type="text"></td><td class="tg-yw4l" ><input type="text"></td><td><a href="javascript:void(0);" class="remCF" >Remove</a></td></tr>'); 
 
    }); 
 
    $(".tg").on('click', '.remCF', function() { 
 
    $(this).closest('tr').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="tg"> 
 
    <tr> 
 
    <td class="tg-mtwr">DATE</td> 
 
    <td class="tg-mtwr" colspan="2">CONTENTS</td> 
 
    <td class="tg-mtwr">PRICE</td> 
 
    <td class="tg-mtwr">BUTTON</td> 
 
    </tr> 
 
    <tr id="addTg"> 
 
    <td class="tg-yw4l"> 
 
     <input type="text"> 
 
    </td> 
 
    <td class="tg-yw4l" colspan="2"> 
 
     <input type="text"> 
 
    </td> 
 
    <td class="tg-yw4l"> 
 
     <input type="text"> 
 
    </td> 
 
    <td class="tg-yw4l"></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="5" style="border:0px solid #fff;"> 
 

 
    </td> 
 
    </tr> 
 
</table> 
 
<button class="addCF">Add</button>

Answer 2

あなたが「削除」リンクをクリックした際に取得した行を削除したいように見えます。そのリンクは次のようになります。

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

しかしそれwouldn」：

<a href="javascript:void(0);" class="remCF"> 

だから1がすでに行を除去するために持っている機能は、クラスremCFを持つ要素がクリックされるたびにトリガされるべきだと思うことができこれらのリンクを動的に作成するため、clickイベントをまだ存在しないものにバインドすることになります。

代わりに、行を削除する関数を呼び出すonclickプロパティでリンクを作成します。

$(document).ready(function(){ 
 
    $(".addCF").click(function() { 
 
    $("#addTg").after('<tr><td class="tg-yw4l" ><input type="text"></td><td class="tg-yw4l" colspan="2" ><input type="text"></td><td class="tg-yw4l" ><input type="text"></td><td><a href="javascript:void(0);" onclick="deleteRow($(this));" class="remCF" >Remove</a></td></tr>'); 
 
    }); 
 
}); 
 

 
function deleteRow(elem) { 
 
    elem.parent().parent().remove(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="tg"> 
 
    <tr> 
 
    <td class="tg-mtwr">DATE</td> 
 
    <td class="tg-mtwr" colspan="2" >CONTENTS</td> 
 
    <td class="tg-mtwr">PRICE</td> 
 
    <td class="tg-mtwr">BUTTON</td> 
 
    </tr> 
 
    <tr id="addTg"> 
 
    <td class="tg-yw4l" ><input type="text"></td> 
 
    <td class="tg-yw4l" colspan="2" ><input type="text"></td> 
 
    <td class="tg-yw4l" ><input type="text"></td> 
 
    <td class="tg-yw4l"></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="5" style="border:0px solid #fff;"> 
 
    
 
    </td> 
 
    </tr> 
 
</table> 
 
<button class="addCF" >Add</button>

こうすることで、あなたはそれがその関数を呼び出しますし、その機能には、以下のことを行いますリンク「削除」をクリックすると：

1. をそれは渡された要素がかかります関数への引数として：$（this）
2. それからそれは親をとります：それが入っているセル（<td>）
3. そしてその細胞の親になります。それが含まの行：（<tr>）
4. それはその要素（行）

これらの4つのステップを削除しますが何elem.parent().parent().remove();手段です。

と同じことを行うには短いアプローチは次のようになります。

elem.closest('tr').remove();