我需要删除div中的最后一个textarea。

<div id="container">
    <!-- question 1st box starts here -->
    <div class="col-md-4">
        <div class="questionparts">
            <div class="form-group">
                <label for="title">Questions</label>
                <textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
            </div>
            <div class="clear"></div>
            <div class="questionshowp">
                <h4 class="page-title">Multiple Choice</h4>
                <h6>Your audience can select from these answers:</h6>
                <div class="form-group">
                    <input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
                    <div class="secondsec">
                        <button type="button" class="btn btn-sm btn-success" style="line-height:12px;"><i class="fa fa-plus" aria-hidden="true"></i></button>
                        <button type="button" class="btn btn-sm btn-danger" style="line-height:12px;"><i class="fa fa-minus" aria-hidden="true"></i></button>
                    </div>
                </div>
                <div class="clear"></div>
            </div>

        </div>
    </div>
    <!-- question 1st box end here -->

    <!-- question 2nd box starts here -->
    <div class="col-md-4">
        <div class="questionparts">
            <div class="form-group">
                <label for="title">Questions</label>
                <textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
            </div>
            <div class="clear"></div>
            <div class="questionshowp">
                <h4 class="page-title">Multiple Choice</h4>
                <h6>Your audience can select from these answers:</h6>
                <div class="form-group">
                    <input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
                    <div class="secondsec">
                        <button type="button" class="btn btn-sm btn-success" style="line-height:12px;"><i class="fa fa-plus" aria-hidden="true"></i></button>
                    <button type="button" class="btn btn-sm btn-danger" style="line-height:12px;"><i class="fa fa-minus" aria-hidden="true"></i></button>
                    </div>
                </div>
                <div class="clear"></div>
            </div>

        </div>
    </div>
    <!-- question 2nd box end here -->
</div>


在这里,我需要始终删除最后一个文本区域(“在本例中为第二个框”)。检查下面的javascript。

function deleteQuestionField(){
    var textareas = $('#container textarea');
    console.log('hii',textareas);
  if (textareas.length !== 0) {
    textareas.last().remove();
  }
}


从按钮单击事件中调用此函数,但不会删除最后一个文本区域。

最佳答案

只需使用jQuery的.remove()see here for more info):

给您的div想要删除唯一的id,然后调用它:

HTML:

 ....
 <!-- question 2nd box starts here -->
        <div class="col-md-4" id="someUniqueId">
 ....


Javascript:

function deleteQuestionField(){
    var textareas = $('#container textarea');
    console.log('hii',textareas);
  if (textareas.length !== 0) {
    $("#someUniqueId").remove(); //This will remove the unique id element
  }
}

07-24 09:51
查看更多