.clery() और .remove() विधि jquery

Question

मेरा कार्य कार्यक्षमता को प्राप्त करना है, जब मैं एक बटन पर क्लिक करता हूं, तो यह एक पूर्ण पंक्ति जोड़ता है, जो मुझे .clone() विधि द्वारा प्राप्त किया जाता है। अब मैं इसे हटाना चाहता हूं। जब मैं क्रॉस बटन पर क्लिक करता हूं, तो केवल उस पंक्ति को हटा दें। जैसा कि छवि में दिखाया गया है:

जब मैं क्रॉस पर क्लिक करता हूं, तो उस पंक्ति को हटा दें। मेरे कोड है:

$(document).ready(function() { 

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

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

}); 

एचटीएमएल:

<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> 

मैं क्रूस पर क्लिक करके उस रेखा को छिपाने के लिए जोड़ें बटन पर क्लिक करके नई लाइन को जोड़ने में सक्षम है, लेकिन में असमर्थ हूँ।

नोट: केवल उस पंक्ति को हटाएं, कौन सा लाइन क्रॉस बटन चुना गया है। सच पासिंग मतलब है कि यह घटनाओं क्लोनिंग है साथ ही

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

:

Answer 1

सबसे पहले, आपको लगता है कि करने के लिए अपने क्लोन को बदलना होगा।

फिर, अपने निकालने के कार्य में, आपको this कीवर्ड का उपयोग करने की आवश्यकता होगी। this बटन क्लिक किया जाएगा। तब आप अपने पंक्ति को दूर करने के लिए निकटतम तरह डोम ट्रेवर्सल विधि का उपयोग कर सकते हैं:

$(".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(); 
    }); 

})