CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JC Lopez
JC Lopez

Reputation: 303

Hiding dynamically created DIV inside datatable

So I have created a datatable with a DIV that I want to hide on page load. Here is the div:

<div class="user" id="userinfo_46"><b>Name: </b>benjy corpuz<br><b>Phone Number: </b>N/A<br><b>Alternate Phone Number: </b><br><b>Email: </b>N/A<br><b>Best Time To Reach: </b>anytime<br><b>Location: </b>new yrork, NY<br><b>Case Description: </b>confidential<br></div>

I did try this:

$('.user').hide();

And this:

$(document).on("pageload", ".user",function(){
    $(this).hide();
});

But nothing. Not sure if there is another way of hiding it on load, can't use a click or such.

Here is a Jfiddle by user Hodrobond, this illustrates the problem well:

https://jsfiddle.net/fcpambdm/

I am getting answers that don't seem to understand that the element is dymanic, so it can't be hidden like a regular element.

Upvotes: 0

Views: 193

Answers (4)

JC Lopez
JC Lopez

Reputation: 303

Totally just found the answers, its simpler than we all thought.

<div class="user" style="display:none" id="userinfo_46"><b>Name: </b>benjy corpuz
<br><b>Phone Number: </b>N/A
<br><b>Alternate Phone Number: </b>
<br><b>Email: </b>N/A
<br><b>Best Time To Reach: </b>anytime
<br><b>Location: </b>new yrork, NY
<br><b>Case Description: </b>confidential
<br>
</div>

Just added style="display:none" to the div and it will hide once the datatable loads that column. Easy :)

Upvotes: 0

Himanshu
Himanshu

Reputation: 490

The working solution with dynamically added content (just added the delay for demonstration purpose). Also note that we need to use hide(0) if we intend to use delay explanation:

$(function() {
  $('.user').append('<b>Name: </b>benjy corpuz<br><b>Phone Number: </b>N/A<br><b>Alternate Phone Number: </b><br><b>Email: </b>N/A<br><b>Best Time To Reach: </b>anytime<br><b>Location: </b>new yrork, NY<br><b>Case Description: </b>confidential<br>').delay(1000).hide(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user" id="userinfo_46">
</div>

NB: shorthand for $(document).ready(function(){}) is $(function(){}). Equivalent javascript is $(document).ready(function(){})

Upvotes: 0

Henry Ogunrinde
Henry Ogunrinde

Reputation: 41

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
//Detects whether the DOM is ready..
$(document).ready(function(){
  //if ready, then run the ff lines..
  // ........
  //Hides the selected div container with class ".user"
   $(".user").hide();
});
</script>

<div class="user" id="userinfo_46"><b>Name: </b>benjy corpuz
  <br><b>Phone Number: </b>N/A
  <br><b>Alternate Phone Number: </b>
  <br><b>Email: </b>N/A
  <br><b>Best Time To Reach: </b>anytime
  <br><b>Location: </b>new yrork, NY
  <br><b>Case Description: </b>confidential
  <br>
</div>

Upvotes: -1

H.P.
H.P.

Reputation: 1221

You can add attribute

style="display:none"

to your div element user.

Upvotes: 2

Related Questions