How to get textarea content after clicking on its reply button?-CodePudding

I am trying to use jquery to get the input of the active textarea. Here is the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
       .commentReply{ display: none;}
    </style>
</head>
<body>
    

    <div >
        <div >
            <button type="button" >
                Reply
            </button>
        </div>
        <div  data-id="">
            <div >
                <div >
                    <textarea  id="textarea-reply"></textarea>
                </div>
                <div>
                    <span >
                        <button  id="btn-send-reply" data-id="1">Submit</button>
                    </span>
                    <span >
                        <button >Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div >
        <div >
            <button type="button" >
                Reply
            </button>
        </div>
        <div  data-id="">
            <div >
                <div >
                    <textarea  id="textarea-reply"></textarea>
                </div>
                <div>
                    <span >
                        <button  id="btn-send-reply" data-id="2">Submit</button>
                    </span>
                    <span >
                        <button >Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

    <script>
        $(document).ready(function(){
            $('.btn-reply').on('click',function(){
                var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
                $('.commentReply').not(closestDiv.next('.commentReply')).hide();
                closestDiv.next('.commentReply').slideToggle(0);
            });
        });
    </script>
</body>
</html>

After clicking on a reply button, the textarea next to it will be displayed.
I though, because only one textarea is active after clicking on the reply button, doing the following might work

$(document).ready(function(){
    $('.btn-send-reply').on('click',function(){
        var text = $('textarea#textareReply').val();
        alert(text);
    });
});

But it did not.

How to get the value of that specific textarea by clicking on its Submit button with class and id having the value btn-send-reply ?
Clicking the first time on the reply button display the next textarea. And clicking on the reply button the next time hide that text area. My preocupation here is a bit similar to the first one. How to close that expanded textarea by clicking on its cancel button ?

CodePudding user response：

With closest you get the closest element from the clicked element.

With prevAll, you will get the previous element with specific class name.

https://api.jquery.com/prevall/

$(document).ready(function(){
    $('.btn-reply').on('click',function(){
      var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
      $('.commentReply').not(closestDiv.next('.commentReply')).hide();
      closestDiv.next('.commentReply').slideToggle(0);
    });
    
    $('.btn-send-reply').on('click',function(){
      var textareaVal = $(this).closest('div').prevAll('.textarea-wrapper').find('textarea').val();  
      console.clear();
      console.log(textareaVal);
    });
    
    $('.btn-cancel-reply').on('click',function(){
      var closestDiv = $(this).closest('div').prevAll('.commentReply');
      $('.commentReply').not(closestDiv.next('.commentReply')).hide();
      closestDiv.next('.commentReply').slideToggle(0);
    });
});

.commentReply{ display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div >
        <div >
            <button type="button" >
                Reply
            </button>
        </div>
        <div  data-id="">
            <div >
                <div >
                    <textarea  id="textarea-reply"></textarea>
                </div>
                <div>
                    <span >
                        <button  id="btn-send-reply" data-id="1">Submit</button>
                    </span>
                    <span >
                        <button >Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div >
        <div >
            <button type="button" >
                Reply
            </button>
        </div>
        <div  data-id="">
            <div >
                <div >
                    <textarea  id="textarea-reply"></textarea>
                </div>
                <div>
                    <span >
                        <button  id="btn-send-reply" data-id="2">Submit</button>
                    </span>
                    <span >
                        <button >Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>