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

Question

我正在第二個文本區域中獲取第一個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，請使用以下類：

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

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

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

Answer 2

如何添加和刪除文本區域。 希望能幫助到你！

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

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>