Как удалить динамически генерируемое Div Используя jQuery

Question

Я хочу удалить динамически сгенерированный div, используя jquery, кнопка удаления будет с каждым div. Поэтому, когда я нажимаю кнопку удаления, он удаляет этот div из DOM.

<div class="form-group" id="drag">  
    <div class="col-md-2"> 
     <input type="text" class="form-control" id="name1" placeholder="Name">  
    </div> 
    <div class="col-md-2"> 
     <input type="text" class="form-control" id="eng1" placeholder="Description Eng">  
    </div> 
    <div class="col-md-2"> 
     <input type="text" class="form-control" id="ar1" placeholder="Description Ar">  
    </div>   
    <div class="col-md-2"> 
     <a id="remove" href="javascript:;" class="btn btn-sm red"> 
      Remove 
      <i class="fa fa-close"></i>                   
     </a> 
    </div> 
</div> 

Answer 1

$('body').on('click', '#remove', function(){ 
    $(this).closest('.form-group').remove(); 
}); 

Но это не правильно, чтобы иметь более одного элемента с одинаковым идентификатором. сообщите вам, чтобы изменить ID на класс

Answer 2

Если бы генерировать div с внутри DIV button, вы можете добавить следующую функцию, чтобы позволить этому button сделать родитель div исчезнуть:

function removeParent() 
{ 
    //remove button click, remove the parent div from the dom 
    $(this).parent().parent().remove(); 
    //in your specific case you want the parent parent div to be removed since the button is encapsulated by 2 divs. 
} 

Эта функция затем нужно добавить к слушателю onclick кнопки. Либо просто установив его в HTML onclick='removeParent()' или с помощью JavaScript:

//gerenate div + button 
mybutton.addEventListener('click', removeParent, false); 

+1

OP говорит о динамически генерируемом 'div'. поэтому, пожалуйста, измените свой ответ. Он не может работать с динамическим html – vijayP

+0

i изменен .. мой код теперь виден –