javascript - 如何使用js清空第二个textarea中的第一个textarea值

我正在第二个文本区域中获取第一个textarea值，因为我使用相同的ID来添加更多概念。下面是我的代码。

<div id="divShortAnswerOption_Templated">
    <div class="form-group">
        <div class="col-sm-3">
            <textarea name="t_short_answer[]" id="t_short_answer[]" style="width:100%;height:150px;" class="form-control"></textarea>
            <span id="check-e"></span>
        </div>
        <div class="col-sm-2">
            <a href="javascript:void(0);" class="btn btn-primary addmoreShort" id="result-button"><i class="fa fa-plus-circle" aria-hidden="true" style="font-size:20px;"></i></a>
            <a href="javascript:void(0);" class="btn btn-danger deleteShort"><i class="fa fa-minus-circle" aria-hidden="true" style="font-size:20px;"></i></a>
        </div>
    </div>
</div>

以下是我的js代码：

if(flagForType=="short"){
    var contentHtml = '';
    contentHtml += '<div class="col-sm-3">';
    contentHtml += '<textarea name="t_short_answer[]" id="t_short_answer" style="width:100%;height:150px;" class="form-control"></textarea>';
    contentHtml += '<span id="check-e"></span>';
    contentHtml += '<div>';
    $("#divShortAnswerOption_Templated").append(contentHtml);
}

最佳答案

如何添加和删除文本区域。希望能帮助到你！

$(document).ready(function(){

   $('.userButton').click(function() {

    var someID = $(this).attr("id");
    if(someID === "result-button"){
      var contentHtml =
    '<div class="col-sm-3">' +
        '<textarea name="t_short_answer[]" class="form-control t_short_answer" style="width:70%;height:120px;"></textarea>' +
        '<span class="check-e"></span>' +
    '<div>';
      $("#divShortAnswerOption_Templated").append(contentHtml);
    }
    else if(someID === "deleteTextArea"){
      $(this).closest("#divShortAnswerOption_Templated").find("textarea.t_short_answer:last").remove();
    }
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="divShortAnswerOption_Templated">
                  <div class="form-group">
                         <div class="col-sm-3">
                                   <textarea name="t_short_answer[]" id="t_short_answer[]" style="width:70%;height:120px;" class="form-control"></textarea>
                                    <span id="check-e"></span>
                         </div>
                        <div class="col-sm-2">
                            <a href="javascript:void(0);" class="btn btn-primary addmoreShort userButton" id="result-button"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
                            <a href="javascript:void(0);" class="btn btn-danger deleteShort userButton" id = "deleteTextArea"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>
                     </div>
                  </div>
             </div>