Question

我在第二个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);
}

Answer 1

ID必须是唯一的，您不能拥有多个具有相同ID的元素。不要为此使用id，请使用这样的类：

＆＃13;

$('.addmoreShort').click(function() { 
  var contentHtml =
    '<div class="col-sm-3">' +
        '<textarea name="t_short_answer[]" class="form-control t_short_answer"></textarea>' +
        '<span class="check-e"></span>' +
    '<div>';
  $("#divShortAnswerOption_Templated").append(contentHtml);
});

＆＃13;

.t_short_answer {
  width: 100%;
  height: 150px;
}

＆＃13;

<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/2.1.1/jquery.min.js"></script>
<div id="divShortAnswerOption_Templated">
  <div class="form-group">
    <div class="col-sm-3">
      <textarea name="t_short_answer[]" class="form-control t_short_answer"></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>

＆＃13;

Answer 2

添加和删除 textareas怎么样？希望它有所帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

# Please try again in advanced functionality add and Remove textareabox. #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $("body").on("click", ".addmoreShort", function () {
            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>';
            contentHtml += '<div class="col-sm-2">';
            contentHtml += '<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>';
            contentHtml += '<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>';
            contentHtml += '<div>';

            $("#divShortAnswerOption_Templated").append(contentHtml);
        });

        $("body").on("click", ".deleteShort",function(){
            var numItems = $('.col-sm-3').length;
            var numItems2 = $('.col-sm-2').length;
            if(numItems > 1){
                $(this).closest(".col-sm-3").remove();
                if(numItems2 == 1){
                    $(this).closest(".col-sm-2").remove();
                }
            }

            if(numItems2 == 0){
                var contentHtml = '';
                contentHtml += '<div class="col-sm-2">';
                contentHtml += '<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>';
                contentHtml += '<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>';
                contentHtml += '<div>';
                $("#divShortAnswerOption_Templated").append(contentHtml);
            }
        });
    </script>

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

3 个答案: