javascript - 如何使用 Javascript/Jquery 删除总 div 内容

Question

我需要删除 div 中的最后一个文本区域。

<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();
  }
}

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

Answer 1

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

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

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
  }
}