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

Question

I am trying to empty next div html data using jquery

$('#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>

I have tried many methods but its not working .I am sure this function is working it might be the issue of next cant able to find div Any help is appriciated

Updated

I have many similar block so i cant use id .so i have empty closest delete div block

Now i have added class name deletePresidentBlock since id should be unque

Answer 1

Here you go with a solution

 $('#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> 

Hope this will help you.

Answer 2

Try this:

$('#deleteAssocPesident').click(function(e) {
    $(this).parent().siblings('div#deletePresidentBlock:first').html('');
});

Answer 3

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

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