There is a code

<div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div>

The button with the addMessage2 class is in a div with the form class. How to click on it to clear the textarea with the textMessage2 class in the div where the button itself is.

Tried so

 $('html').on('click','.addMessage2',function (){ $('.textMessage2').val(" "); });

But then all textarea are cleared and you need to clear the textarea in which the button itself and the textarea .

PS: I can not change the code. Already a lot of things tied to it.

    2 answers 2

    Using the siblings function, we look for the neighboring element, and there we turn to the child textarea

     $('html').on('click', '.addMessage2', function() { $(this).siblings('.message2add').children('.textMessage2').val(' '); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div>

    • Thanks, I read, read about siblings and never figured it out. It’s time to rest. - Anatoly

     $(_ => { $('.form').on('click', '.addMessage2', function(){ $(this).parent().find('.textMessage2').val(''); }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div> <div class="form"> <p align="center"> <div class="message2add"> <textarea class="textMessage2"></textarea> </div> <button class="addMessage2">Добавить второе сообщение</button> </p> </div>