单击 div 时，清除最近的输入字段

Question

我希望最接近具有"removeDiv"类的div的输入字段被单击清除。

我还有一个问题，即通过选择"删除"隐藏div 后，用户无法将其重新添加。但我可能需要把它分成第二个问题。

下面是代码的截断版本：

//Add another designation
var count = 0,
$allDivs = $('#flexible_designated_donation_element2_row, #flexible_designated_donation_element3_row, #flexible_designated_donation_element4_row, #flexible_designated_donation_element5_row, #flexible_designated_donation_element6_row, #flexible_designated_donation_element7_row, #flexible_designated_donation_element8_row, #flexible_designated_donation_element9_row, #flexible_designated_donation_element10_row');
$('#addAnother').click( function() {
if( count < $allDivs.length ) {
$allDivs.eq( count ).fadeIn( 'slow' );
count++;
}
});
$('.removeDiv').click( function() {
	$(this).closest('div[id*="flexible_designated_donation_element"]').hide();
	
});

div[id*='flexible_designated_donation_element']{
display: none;
}
#addAnother {
cursor: pointer;
margin-top:10px;
}
.removeDiv {
margin-bottom:10px;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flexible_designated_donation_element1_row" class="designated-giving-input-row form-row form-input">
<div id="flexible_designated_donation_element1designee_container" class="designated-giving-selection-container">
<label class="designated-giving-amount-label">Area of Support:</label><select name="flexible_designated_donation_element1primary" id="flexible_designated_donation_element1primary" size="1">
<option value="-1">Select</option>
<optgroup label="Laboratory Schools">
<option value="1001">Classroom Gift for Teachers</option>
</optgroup>
</select>
</div>
<div class="designated-giving-amount-container">
<label for="flexible_designated_donation_element1name" class="designated-giving-amount-label">Gift Amount:</label>
<input type="text" name="flexible_designated_donation_element1name" id="flexible_designated_donation_element1name" value="" maxlength="15" onchange="fire_obs_comp_event('flexible_designated_donation_element1', this);">
<input type="hidden" name="flexible_designated_donation_element1submit" id="flexible_designated_donation_element1submit" value="true">
<div class="removeDiv">Remove X</div></div>
</div>
<div id="flexible_designated_donation_element2_row" class="designated-giving-input-row form-row form-input">
<div id="flexible_designated_donation_element2designee_container" class="designated-giving-selection-container">
<label class="designated-giving-amount-label">Area of Support:</label><select  name="flexible_designated_donation_element2primary" id="flexible_designated_donation_element2primary" size="1">
<option value="-1">Select</option>
<optgroup label="Laboratory Schools">
<option value="1001">Classroom Gift for Teachers</option>
</optgroup>
</select>
</div>
<div class="designated-giving-amount-container">
<label for="flexible_designated_donation_element2name" class="designated-giving-amount-label">Gift Amount:</label>
<input type="text" name="flexible_designated_donation_element2name" id="flexible_designated_donation_element2name" value="" maxlength="15" onchange="fire_obs_comp_event('flexible_designated_donation_element2', this);">
<input type="hidden" name="flexible_designated_donation_element2submit" id="flexible_designated_donation_element2submit" value="true">
<div class="removeDiv">Remove X</div></div>
</div>
<div id="flexible_designated_donation_element3_row" class="designated-giving-input-row form-row form-input">
<div id="flexible_designated_donation_element3designee_container" class="designated-giving-selection-container">
<label class="designated-giving-amount-label">Area of Support:</label><select  name="flexible_designated_donation_element3primary" id="flexible_designated_donation_element3primary" size="1">
<option value="-1">Select</option>
<optgroup label="Laboratory Schools">
<option value="1001">Classroom Gift for Teachers</option>
</optgroup>
</select>
</div>
<div class="designated-giving-amount-container">
<label for="flexible_designated_donation_element3name" class="designated-giving-amount-label">Gift Amount:</label>
<input type="text" name="flexible_designated_donation_element3name" id="flexible_designated_donation_element3name" value="" maxlength="15" onchange="fire_obs_comp_event('flexible_designated_donation_element3', this);">
<input type="hidden" name="flexible_designated_donation_element3submit" id="flexible_designated_donation_element3submit" value="true">
<div class="removeDiv">Remove X</div></div>
</div>
<div id="addAnother">+ Add Another
</div>

我尝试将脚本更新设置为以下内容：

$('.removeDiv').click( function() {
$(this).closest('div[id*="flexible_designated_donation_element"]').hide ();
$(this).closest('input[id*="flexible_designated_donation_element"]').val('');
});

Answer 1

由于父div和input元素的id包含相同的flexible_designated_donation_element，因此单击时，您的目标是div元素而不是input。

要清除输入值，您必须先find()输入：

$(this).closest('div[id*="flexible_designated_donation_element"]').find('input').val('');