Как удалить строку с помощью jQuery?

Question

В нижней части страницы выпадающий список указан для выбора новых языков «Добавить языки». Если пользователь выберет новый язык, сгенерирует строку. Если они не нужны, они могут удалить его. Я добавил крестик и добавил имя класса «removefile». Как это работает в моем текущем коде?

Demo

JS

//fake data for this test 
var response = { 
    availableLanguage: [{ 
     id: "1", 
     language_id: "English", 
     title_en: "USEnglish" 
    }, { 
     id: "2", 
     title_en: "Hindi" 
    }, { 
     id: "3", 
     title_en: "Arabi" 
    } 

    ] 
} 


var responseDB = { 
    selectLanguageRankingTagId: [{ 
     id: "1", 
     user_id: "11", 
     language_id: "English", 
     ranking: "2", 
     title_en: "English" 
    }, { 
     id: "2", 
     user_id: "11", 
     language_id: "German", 
     ranking: "3", 
     title_en: "German" 
    }, { 
     id: "3", 
     user_id: "11", 
     language_id: "French", 
     ranking: "4", 
     title_en: "French" 
    } 

    ] 
} 


var $languagemodal = $('#languagemodal'); // get the modal and the dialog div 
var $dialog = $languagemodal.find('.modal-dialog'); 

//$languagemodal.modal({show: true}); // just to show the modal for the demo 

// get languages 
//$.get("/tag/language", function(response){ 
     var optionLang = ''; 
     for (var i = 0; i < response.availableLanguage.length; i++) { 
      engLangID = response.availableLanguage[i].id; 
      engLang = response.availableLanguage[i].title_en; 
      optionLang += '<option value="'+engLangID+'" data-language="'+engLang+'">'+engLang+'</option>'; 
     } 

// load the modal content div 
$dialog.html('<div class="modal-content"><div class="modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body"><div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm addMore"><option selected="selected">Add Language</option>' + optionLang + '</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>'); 

// get the modal body we just added 
var $modalBody = $dialog.find('.modal-body'); 

// loop over your data, you would have this in your $.get function 
$.each(responseDB.selectLanguageRankingTagId, function (i, item) { 
    // make the row 
    var $newRow = $('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">' + item.title_en + '</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="' + item.id + '" data-item="' + item + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div>') 
    // set the select value 
    $newRow.find('select').val(item.ranking); 
    // add the row to the modal body 
    $modalBody.append($newRow); 

}); 

$(".modal-dialog").on('change', ".addMore", function(){ 
      var selected = $(this).find(':selected'); 
      language  = selected.data('language'); 
      languageID  = selected.val(); 
      $(".appendRow").append('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">'+language+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><span class="glyphicon glyphicon-remove removefile" data-removefile=""></span></div></div>'); 
     });  

//});// get languages end  

HTML

<div id="languagemodal"> 
    <div class="modal-dialog" style="margin: 54px 0px;"></div> 
</div> 

Answer 1

Вам необходимо добавить еще один делегированный обработчик событий для элемента .removefile, чтобы удалить родительский .row. Попробуйте это:

$('.modal-dialog').on('click', '.removefile', function() { 
    $(this).closest('.row').remove(); 
}); 

Updated fiddle

Answer 2

jQuery(".modal-dialog").on("click",".removefile",function(){ 
    jQuery(this).closest(".row").remove() 
}); 

будет удалить первый родительский элемент с классом = строку, если элемент с CLAS s = удалить файл.

EDIT: моя ошибка в не тестировании перед публикацией. в случае, когда вы хотите динамически добавлять элементы позже, вы должны прикрепить событие «click» к родительскому элементу, который существует в точке запуска сценария, и делегировать его соответствующему динамически созданному элементу