javascript - 如何使用 jQuery 删除下一个元素的内容？

Question

我正在尝试使用 jquery 清空下一个 div html 数据

$('#deleteAssocPesident').click(function(e){
  // e.preventDefault();
  console.log(e);

  $(this).next('div').next('#deletePresidentBlock').html('');
});

HTML

<div class="user_president_designation" id="user_designation_president">President <i class="fa fa-trash-o" aria-hidden="true" id="deleteAssocPesident" style="float: right;font-size: 22px;margin-top: 4px;" ></i></div>
<div class="user_president_block" id="deletePresidentBlock">
  <img src="" style="max-width: 300px;max-height: 300px;min-height: 300px;" class="img img-responsive" />
  <div class="user_president_name">{{$firstName}}&nbsp;{{$lastName}}</div>
  <input type="hidden" value="" name="president">
</div>

我已经尝试了很多方法，但它不起作用。我确信这个功能正在起作用，这可能是下一个无法找到div的问题 任何帮助都是appriced

已更新

我有很多类似的 block ，所以我不能使用 id 。所以我有空的最接近的删除 div block

现在我添加了类名deletePresidentBlock，因为 id 应该是唯一的

Answer 1

给你一个解决方案

$('#deleteAssocPesident').click(function(e){
  $(this).closest('div#user_designation_president').next('#deletePresidentBlock').html('');
});

<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 class="user_president_designation" id="user_designation_president">President   <i class="fa fa-trash-o" aria-hidden="true" id="deleteAssocPesident" style="float: right;font-size: 22px;margin-top: 4px;" ></i>
</div>
<div class="user_president_block" id="deletePresidentBlock">
  <img src="" style="max-width: 300px;max-height: 300px;min-height: 300px;" class="img img-responsive" />
  <div class="user_president_name">{{$firstName}}&nbsp;{{$lastName}}</div>
  <input type="hidden" value="" name="president">
</div>

希望这对您有帮助。