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

Question

我希望通过单击该 div 来清除最接近类“removeDiv”的 div 的输入字段。

我还遇到一个问题，即通过选择“删除”隐藏 div 后，用户无法将其添加回来。但我可能需要将其分解为第二个问题。

这是代码的 chop 版本:

//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('');