CODEWITHSUNDEEP
javascriptjqueryrazor
HelloWorld1010
HelloWorld1010

Reputation: 73

DOM Traversal to find the sibling of a parent

If I want to create an event that hides the .dependent-box section when .radio-click-hide is clicked how would I traverse the elements to make that happen? I've tried this but it didn't work: 

jQuery(function ($) {
    $('.radio-click-hide').on("click", function (e) {
       $(this).closest('.dependent-box').hide() 
    });
});

Also, I have many of these throughout my program so it needs to target the closest .dependent-box

<table>
    <tr class="form-group">
        <td class="form-label">
            @Html.LabelFor(model => model.IsAchievedByLiveMeeting, htmlAttributes: new {@class = "control-label"})
        </td>
        <td class="form-input">
            @Html.RadioButtonFor(model => model.IsAchievedByLiveMeeting, true, new { @class = "radio-click-hide" }) Yes
            @Html.RadioButtonFor(model => model.IsAchievedByLiveMeeting, false, new { @class = "radio-click-show" }) No
            @Html.ValidationMessageFor(model => model.IsAchievedByLiveMeeting, "", new {@class = "text-danger"})
        </td>
    </tr>
    <tr class="form-group dependent-box">
        <td class="form-label"></td>
        <td class="form-input">
            @Html.LabelFor(model => model.LiveMeetingExplaination, htmlAttributes: new {@class = "control-label"})
            @Html.EditorFor(model => model.LiveMeetingExplaination, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.LiveMeetingExplaination, "", new {@class = "text-danger"})
        </td>
    </tr>
</table>

Upvotes: 1

Views: 36

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

closest() alone won't work as the .dependent-box element is a sibling to the parent tr of the checkbox. Try this instead:

$('.radio-click-hide').click(function() {
    $(this).closest('tr').next('.dependent-box').hide()  
});

Upvotes: 2

Related Questions