jqueryの.clone（）メソッドと.remove（）メソッド

Question

私の仕事は、ボタンをクリックすると、.clone（）メソッドによって私に与えられた完全な行を追加することです。今私はこれを削除したい。十字ボタンをクリックすると、その行だけが削除されます。画像に示すように：

私が十字をクリックすると、その行が削除されます。私のコードは次のとおりです。

$(document).ready(function() { 

    $("button#add").click(function(){ 
    $(".abcd:last").clone().appendTo(".wrapper"); 
}); 
$(".glyphicon-remove").click(function() { 

     $(".abcd:last").remove(); 
    }); 

}); 

HTML：

<div class="wrapper"> 
      <div class="form-group abcd" id="abcde">  
      <div class="col-sm-12" > 
       <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday</a></li><li class="week"><a href="#">Tuesday</a></li> 
        <li class="week"><a href="#">Wednesday</a></li><li class="week"><a href="#">Thusday</a></li> 
        <li class="week"><a href="#">Friday</a></li><li class="week"><a href="#">Saturdayy</a></li> 
        <li class="week"><a href="#">Sunday</a></li> 
       </ul> 
      </div> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday-saturaday</a></li> 
       </ul> 
      </div> 
      <label for="exampleInputEmail1"> : </label> 
       <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;"> 
        <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li> 
        <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>     
        <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>     
        <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>     
       </ul> 
      </div> 
       <label for="exampleInputEmail1"> to </label> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
        <li class="week"><a href="#">Monday-saturaday</a></li> 
       </ul> 
      </div> 
      <label for="exampleInputEmail1"> : </label> 
      <div class="btn-group week"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00 
        <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;"> 
        <li class=""><a href="#">.00</a></li><li class=""><a href="#">.01</a></li> 
        <li class=""><a href="#">.02</a></li><li class=""><a href="#">.03</a></li>     
        <li class=""><a href="#">.04</a></li><li class=""><a href="#">.05</a></li>     
        <li class=""><a href="#">.06</a></li><li class=""><a href="#">.07</a></li>     
       </ul> 
      </div> 
       <span class="glyphicon glyphicon-remove"></span> 
      </div> 
     </div> 
     </div> 
    </form> 

    <button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button> 
    <button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button> 

私は、[追加]ボタンをクリックして新しい行を追加することができますが、十字架の上でクリックすると、その行を非表示することができません。

注：その行のみを削除します。どの行のクロスボタンが選択されていますか。

Answer 1

まず、あなたはそれにあなたのクローンを変更する必要があります：

$(".abcd:last").clone(true).appendTo(".wrapper"); 

は、それは同様のイベントをクローニングされていることを真の平均を渡します。

次に、削除機能では、キーワードthisを使用する必要があります。 thisがクリックされます。次に、あなたの行を削除するために最も近いようにDOMのトラバーサル方法を使用することができます。

$(".glyphicon-remove").click(function() { 

    $(this).closest(".abcd").remove(); 
}); 

Answer 2

また、あなたがこのようなコンテナにイベントをバインドすることができます。

$(document).ready(function() { 

    $("button#add").click(function() { 
      $(".abcd:last").clone().appendTo(".wrapper"); 
    }); 

    $(".wrapper").on('click', '.glyphicon-remove', function() { 
      $(".abcd:last").remove(); 
    }); 

})