Почему метод ближайший() не находит ближайший класс в моем javascript-коде?

Question

Я создаю динамически следующие классы с полем ввода, однако, когда я хочу удалить предыдущую строку, я ничего не получаю. В чем может быть проблема?

моего Javascript код выглядит следующим образом:

$(document).ready(function(){ 
    $("#add_row").click(function(){ 
     var newCommercial = $("<div class='singleCommercial'><div class='form-group'><input class='datetimepicker'></div>"); 
     newCommercial.appendTo($('#listOfCommercials')); 

     newCommercial.find('.datetimepicker').val(dd+"/"+mm+"/"+yy+" "+time).datetimepicker(); 
    }); 

    $("#delete_row").click(function() { 
     $(this).closest('.singleCommercial').remove(); 

    }); 
}); 

и полная страница может быть видна в моей скрипке: http://jsfiddle.net/7yd5o63q/12/

Спасибо!

Answer 1

closest предназначенный для поиска ближайших родственников . Элемент, который вас интересует, не является предком кнопки.

В вашем случае, вы хотите удалить последний элемент, вы можете использовать селектор :last или вы можете также использовать last().

У вас также есть дубликат id singleCommercial в вашей разметке. Это недопустимо HMTL, вы можете удалить это. Если вы хотите, вы можете использовать его как класс.

Demo

$(document).ready(function() { 
 
    $("#add_row").click(function() { 
 
    var newCommercial = $("<div class='singleCommercial'><div class='form-group'><input class='datetimepicker'></div>"); 
 
    newCommercial.appendTo($('#listOfCommercials')); 
 

 
    // newCommercial.find('.datetimepicker').val(dd + "/" + mm + "/" + yy + " " + time).datetimepicker(); 
 
    }); 
 

 
    $("#delete_row").click(function() { 
 
    $('.singleCommercial:last').remove(); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="listOfCommercials"> 
 
    <div id="singleCommercial"> 
 
    <div class="form-group"> 
 
     <input type='text' class="form-control datetimepicker" id='datetimepicker' name="appearanceDate0" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button id="add_row" class="btn btn-default">Add Row</button> 
 
<button id="delete_row" class="btn btn-default">Delete Row</button>

Answer 2

Я предполагаю, что вы хотите, чтобы удалить последний .singleCommercial элемент из списка, где вы добавляющим DIV.

Вы должны попробовать

$("#delete_row").click(function() { 
    $('#listOfCommercials > .singleCommercial').last().remove(); 
}); 

.closest() функция JQuery выбирает элемент, который является родителем предка к текущему элементу. Поскольку элемент #delete_row, указанный вашей переменной this, не может найти .singleCommercial с использованием .closest() fn, поскольку он не является его родительским элементом и находится в другой иерархии, поэтому он возвращает пустой набор объектов jQuery и ничего не удаляется.

Как это сделать, вы можете либо удалить последний элемент в блоке #listOfCommercials. Или вы можете добавить кнопку удаления внутри .singleCommercial, а затем использовать .closest(), чтобы он удалял весь блок.

Обновлено демо скрипку для удаления только последнего элемента в блоке #listOfCommercials сНу

http://jsfiddle.net/zmL7j3xL/1/