jQuery how to on element click hide only li assosiated with the element not others

I am having some problems. Basically I am adding images which are loaded via the load function in jQuery into the page via a file called notice.php

This file will display photos and such. The problem I am facing is this: For the photos I will be adding thickbox support which I can do using rel tag. However, I want to give my users开发者_JS百科 the ability to delete these photos by clicking the icon that will show up. Here is the structure:

e
<ul class="imglist">

<li>
<img src="http://localhost/fileserver/3/2lV2H075.jpg" width="308" height="auto"    alt="Image1" />

<div class="actions">   
<a href="#" class="imglistbutton">
<img src="http://localhost/fileserver/1/j5357n7X.png" width="16" height="16" alt="Delete" />
</a>
</div>

</li>

<br/>

<li>
<img src="http://localhost/fileserver/3/2lV2H075.jpg" width="308" height="auto"    alt="Image2" />

 <div class="actions">  
 <a href="#" class="imglistbutton">
 <img src="http://localhost/fileserver/1/j5357n7X.png" width="16" height="16" alt="Delete" />
 </a>
 </div>

 </li>

 <br/>
 </ul>

So when the user clicks on

<#img src="http://localhost/fileserver/1/j5357n7X.png" width="16" height="16" alt="Delete" />

the jQuery code will close the specific LI tag which this element was clicked in.

Here is the code that I failed at:

 <script type="text/javascript">
$(document).ready(function() {

$(".imglistbutton").live("click", function() {

$(this).hide();
var imgHide = $(this).attr("li")
$("img").hide();
$(imgHide).hide();

});
});
</script>

And my last question is this:

Basically I have a file called main.html. When a user clicks anything in the navigation, it loads a page via the jQuery load command into a specified div id element.

So say I click "Dashboard". PHP will load dashboard.php, but I need to load more items into dashboard.php via AJAX.

I tried putting code in the main.html so it would read the div elements in dashboard.php and load other files the same way as it loaded dashboard.php via jQuery load, but this does not seem to work. I need to use the following code in every other file then main.html to load stuff via AJAX:

    <script type="text/javascript">

$(function() {
    var href = "notice.php";
    $("#dashboard_notice_utm").load(href);
});

</script>

So this code would be in dashboard.php to load the notice.php file. Would there be an easier way to do this and not have to include stuff in the pages, but rather use one JS file instead? The same goes for my first question since it needs the code to be on notice.php to close the images.

• Thank you in advance and sorry for such a long question.

---

For the first question, you don't want to use .attr("li") because li is not an attribute, it is an ancestor. you should instead use .closest as so:

$(".imglistbutton").live("click", function() {

$(this).closest("li").hide();

});
});

For the 2nd question, you can use the complete parameter of load to execute jquery after the load operation finishes. Something like this:

$('#result').load('dashboard.php', function() {
    var href = "notice.php";
    $("#dashboard_notice_utm").load(href);
});

This way, once dashboard.php is loaded, a call will be made to load notice.php into #dashboar_notice_utm.

---

For the image question, there is no atribute "li" in your <a> tag so I assume you just want to hide the whole <li> container. In that case

$(".imglistbutton").live("click", function() {

$(this).hide();
var imgHide = $(this).parents("li");
$("img").hide();
imgHide.hide();

});

should work

For the rest, I suggest you create a new question on SO as you'll be more likely to have an answer if it's a separate question.

---

I'd probably use the closest parent (.closest()), which got introduced in 1.3, since that's a bit more specific...

$(document).ready(function(){    
    $(".imglistbutton").live("click", function(){
        var imgHide = $(this).closest("li"); // closest parent li only
        imgHide.hide(); // hides all children (this, div, a, img, etc.)
    });
});

---

In answer the the first question

$('.imglistbutton').live('click', function() {
  $(this).closest('li').hide();
});

Will find the closest li link to the image that was clicked

And the second question

I would either have it in a master page - that is if you're framework allows it, or alternatively have a single js file that you include on each page using a script tag in the head.