найти значение ближайшего поля ввода

Question

Пожалуйста, помогите по коду в этой скрипке. То, что я пытаюсь достичь, - получить входное значение из ближайшего к кнопке удаления поля. :

http://jsfiddle.net/w9g3e8mb/11/

function deleteTheCtrl() { 
    var ctrl_name = $(this).parent().find("div").first().find("input").first().val(); 
    alert("Control Name :: " + ctrl_name);  
} 

---

HTML, как показано ниже:

<ul> 
<li style="height: 200px; width:300px !important;margin-left: 30px;overflow: visible;"> 
    <label for="control_name">Control Name:</label> 
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> 
     <input name="control_name" id="control_name" value="Fan" type="text"/> 
    </div> 
    <button type="button" onclick="deleteTheCtrl()" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-notext deleteCtrlLink" title="Delete Control" value="Delete Control" height="30px">Get Name</button> 
</li> 
</ul> 

Answer 1

Если li будет только когда-либо в ней один input, то:

var ctrl_name = $(this).closest('li').find('input').val(); 

... но ваш тоже будет работать. Реальная проблема заключается в том, что this - это не то, что вы ожидаете от нее.

Чтобы исправить это, передать this в deleteTheCtrl:

onclick="deleteTheCtrl(this)" 

... а затем использовать этот аргумент:

function deleteTheCtrl(btn) { 
    var ctrl_name = $(btn).closest('li').find('input').val(); 
    // Or your: var ctrl_name = $(btn).parent().find("div").first().find("input").first().val(); 
} 

---

Но еще лучше было бы не с помощью атрибута onclickна всех. Вместо обрабатывать click в списке:

$("selector for the list").on("click", "button.deleteCtrlLink", function() { 
    var ctrl_name = $(this).closest('li').find('input').val(); 
    // Or your: var ctrl_name = $(this).parent().find("div").first().find("input").first().val(); 
}); 

Потому что делегированный обработчик, он работает даже тогда, когда вы добавлять и удалять элементы списка, при условии, что элемент ul или ol вы идентифицирующий с selector for the list не удаляются/воссозданным , (Если это так, просто задвиньте клик дальше.)