CODEWITHSUNDEEP
javascriptjqueryhtml
scott
scott

Reputation: 3202

How can I remove the contents of the next element with jQuery?

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

Upvotes: 0

Views: 77

Answers (3)

kheya
kheya

Reputation: 7612

Try this:

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

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

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.

Upvotes: 1

kyun
kyun

Reputation: 10264

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

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

Upvotes: 0

Related Questions