我希望最接近具有“removeDiv”类的 div 的输入字段被单击以清除该 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('');
});
由于父元素div和input元素都id包含相同的flexible_designated_donation_element，因此单击时，您的目标是div元素而不是input。
要清除输入值，您必须先find()输入：
$(this).closest('div[id*="flexible_designated_donation_element"]').find('input').val('');
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句