在最后一个Dialog模式上隐藏下一个按钮

Question

I have an HTML look like this

<div id="" class="modalDialog">
<div>   
    <form role="form" class="registration-form" >    
        <fieldset>
            <div id="outerr">
                <div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
            </div>
        </fieldset>
        <fieldset>
            <div id="outerr">
                <div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
            </div>
        </fieldset>
        <fieldset>
            <div id="outerr">
                <div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
            </div>
        </fieldset>                    
    </form>
</div>
</div>
<div id="" class="modalDialog">
<div>   
    <form role="form" class="registration-form" >    
        <fieldset>
            <div id="outerr">
                <div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
            </div>
        </fieldset> 
        <fieldset>
            <div id="outerr">
                <div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
            </div>
        </fieldset>                   
    </form>
</div>
</div>
<div id="" class="modalDialog">
<div>   
    <form role="form" class="registration-form" >    
        <fieldset>
            <div id="outerr">
                <div class="innerr"><button type="button" class="btn btn-next">Next</button></div>
            </div>
        </fieldset>                    
    </form>
</div>

I want to hide the next button of last fieldset of every modal dialog appears. Anyone, please suggest me. I am new to jquery and haven't done this kind of thing before. I code to learn and sometimes I fall in problem.

Answer 1

Rahul css答案是正确的，但如果你要使用jquery这里是代码

$(".modalDialog button:last-child").hide();

Answer 2

Try this simple way In CSS code

button {
visibility: hidden
}

Answer 3

to hide btn in last element use " last-child " selector

.modalDialog:last-child .btn.btn-next {
    display: none;
}

see fiddle

Answer 4

The :last-child selector matches every element that is the last child of its parent, so you can select the last form element and hide it using display:none .

You can read more about :last-child here .

Notes: you are using duplicate id (id="outerr") in your HTML, which could make you markup invalid and create some issues, please consider correcting this issue in your real app.

 .modalDialog:last-child form { display: none; } 

 <div id="" class="modalDialog"> <div> <form role="form" class="registration-form" > <fieldset> <div id="outerr"> <div class="innerr"><button type="button" class="btn btn-next">Next</button></div> </div> </fieldset> <fieldset> <div id="outerr"> <div class="innerr"><button type="button" class="btn btn-next">Next</button></div> </div> </fieldset> <fieldset> <div id="outerr"> <div class="innerr"><button type="button" class="btn btn-next">Next</button></div> </div> </fieldset> </form> </div> </div> <div id="" class="modalDialog"> <div> <form role="form" class="registration-form" > <fieldset> <div id="outerr"> <div class="innerr"><button type="button" class="btn btn-next">Next</button></div> </div> </fieldset> <fieldset> <div id="outerr"> <div class="innerr"><button type="button" class="btn btn-next">Next</button></div> </div> </fieldset> </form> </div> </div> <div id="" class="modalDialog"> <div> <form role="form" class="registration-form" > <fieldset> <div id="outerr"> <div class="innerr"><button type="button" class="btn btn-next">Next</button></div> </div> </fieldset> </form> </div> 

Answer 5

this should be.

fieldset:last-child .btn.btn-next {
    display: none;
}

this is the code which solved my problem.