2

特定のDivの「X」ボタンをクリックしたときに、追加された行を削除する方法。

JsFiddle DEMO は次のとおりです: http://jsfiddle.net/7jE9p/4/

ここにもコードを提供しています：

HTML:

      <p>
          <a href="javascript:void(0);" class="add_more">Add More</a>
      </p>

<table border="0" width="500" cellspacing="0">
   <tbody class="append_data"></tbody>

<tr>
  <td> 
      <textarea name="description" id="description"></textarea>
  </td> 
</tr> 

</table>

CSS:

#description{
    width:400px;    
}

.description_text{
    border:#333333 solid 1px;
    width:400px !important;
}

.append_data{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

JQuery:

$('.add_more').click(function()
                     {
                        var description = $('#description').val();
                         $(".append_data").append('<div class="description_text">'+description+' <a href="javascript:void(0);">X</a></div><br><br>');

                     });
4

3 に答える 3

9

動的に追加された要素については、 on() を使用し、次のように最も近い静的要素をデリゲートする必要があります。

$('.append_data').on('click','.description_text a',function(){
     $(this).closest('.description_text').remove();
});

デモ

description_text css に追加できます 

margin-bottom:10px;

<br/>そして、追加への追加を無視します

デモ

于 2013-09-17T13:36:25.980 に答える
3

ここにいい答えがあります。とにかく、最善の選択肢は、関数スコープ内の変数に要素を格納することです。次に、特定のセルに接続されていたすべての要素を簡単に削除できます。

http://jsfiddle.net/7jE9p/8/

JS:

$('.add_more').click(function () {
    var description = $('#description').val();
    var deleteButton = $('<a href="javascript:void(0);">X</a>');
    var cell = $('<div class="description_text">' + description + '</div>');
    var spaces = $('<br /><br />');

    cell.append(deleteButton);

    $(".append_data").append(cell);
    spaces.insertAfter(cell);

    deleteButton.click(function () {
        cell.remove();
        spaces.remove();
    });
});
于 2013-09-17T13:51:43.503 に答える