Question

I have question i.e how can i select a previous div
CODE:-

if($i > $start_from){
                echo "<div id=\"blog$i\"><h1 style=\"padding-top:30px; font-size:14px;\" id=\"shareContent\"><a target=\"_blank\" href=\"$url\">$title</a><br /></h1>
                $desc
                <br />
                <p><em>hahaquotes, DATED: $date, URL: <a target=\"_blank\" href=\"$url\">$url</a></em></p>
                <div class=\"applyLink\" style=\"width:720px; padding-right:12px; margin-top:20px;\">
                <p><a target=\"_blank\" href=\"$url\">READ</a><span style=\"float:right; cursor:pointer;\"><a class=\"delete\">DELETE</a></span></p>
                </div></div>";
                if($i == $start_from + 4) break; 
                }
                }

This is my code When i click on DELETE the whole div should be deleted the id for div is dynamically created how can i achive this using jquery. Please Help me Thank you in advance

Answer 1

Attach a click handler to the anchor using the delete class as a selector. Within the handler this will refer to the clicked element, and from there you can traverse to the thing you want to delete without needing to know its id:

$("a.delete").click(function() {
    $(this).closest("div").closest("div").remove();
});

The .closest() method traverses up through the DOM to find the closest ancestor matching the supplied selector. In your particular html structure the div you are looking for is the second-closest, so I’ve simply chained two invocations of .closest() together.

You can simplify this if you modify your html to give the div you want to remove a particular class, say “entry”, because then you can traverse up to it with a single call to .closest() as follows:

echo "<div id=\"blog$i\" class=\"entry\">(etc.)"

$("a.delete").click(function() {
    $(this).closest("div.entry").remove();
});

If you have several of these structures then each “delete” link would remove only the div that it belongs to.