主页 / 问题 / 636641
Accepted
Анатолий
Asked:2020-03-08 01:01:41 +0000 UTC2020-03-08 01:01:41 +0000 UTC

jquery 在按钮单击时清除相邻的文本区域

  • 772

有一个代码

<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在单击按钮之前用按钮本身所在的 div 中textarea的类清除它。textMessage2

试过这样

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

但是然后一切都被清除了，textarea但是你需要清除textarea那个div本身就是按钮和textarea。

PS：我无法更改代码。已经绑定了很多东西。

javascript

2 个回答

  1. Best Answer

    使用这个函数，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>

    • 3 

  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>

    • 1

相关问题