jquery очистить соседний textarea по клику на кнопку

392

08 марта 2017, 19:42

Есть код

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

Кнопка с классом addMessage2 находится в div с классом form Как пре клике на нее очистить textareaс классом textMessage2 в том диве где сама кнопка.

Пробовал так

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

Но тогда очищаются все textarea а нужно очистить тот textarea в котором диве сама кнопка и textarea.

PS: Код изменить не могу. Уже очень много чего привязал к нему.

Answer 1

С помощью функции siblings ищем соседний элемент, а там обращаемся к дочернему 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>

Answer 2

$(_ => { 
  $('.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>