I am setting some <li> and anchor tag using jQuery . Now i want to remove the attach li on anchor click.Let me show on code what I am trying to do.And I can't assign any id to these elements as they are generating dynamically.
<ul id="imagess">
<li><img width="60" height="60" src="http://example.com/images/event.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
<li><img width="60" height="60" src="http://example.com/images/event2.png"></li> <img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</ul>
I am trying to remove the <li> on deletit() js function call
A solution for your current HTML using event delegation.
$(document).on('click', 'li + a', function(){
$(this).prev().remove();
})
However, your HTML/JS should look more like this to be valid:
$(document).on('click', '#imagess li a', function(){
console.log(this);
$(this).closest('li').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="imagess">
<li>
<img width="60" height="60" src="http://example.com/images/event.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
<li>
<img width="60" height="60" src="http://example.com/images/event2.png">
<a href="javascript:void(0);">
<img style="float: left; margin-left: -25px;margin-top: 60px;" src="http://example.com/images/delete.png">
</a>
</li>
</ul>
$('ul a').click(function() {
$(this).prev().remove();
});
prev() gets the previous sibling to the a element, which is the li. remove() is pretty self explanatory.
Also, your HTML is invalid. The only elements allowed as direct children of ul are li elements.
Edit: The answers with "closest" given above will be correct if you move the a inside the li. People are assuming they're already in there as the HTML is invalid otherwise.
Update : remove inline onclick attribute from a tag as you have defined click event in code itself
Previous fiddle : http://jsfiddle.net/Lp88exqb/
New Fiddle : http://jsfiddle.net/Lp88exqb/1/
You should not have a tag as direct child of ul tag, it should be in li tag and than you have to use following code to remove previous li on any click
$('ul a').click(function() {
$(this).parent().prev().remove();
});
1. Step 1
Your HTML CODE has to be like this
-------------------------------------
<code>
<ul id="imagess">
<li>Img1</li>
Img1
<li>Img2</li>
Img2
</ul>
</code>
-------------------------------------------
2. Write a JS Funcion like this
-------------------------------------------
function deleteit(obj){
$(obj).prev('li').remove();
}
You have the jQuery tag, so here is an example with that:
$(this).closest('li').prev().remove();
Update: from the wording of question details and your comment, it sounds like path is the anchor itself, and that you don't want to remove previous li, but the container li itself, if so, change to:
$(path).closest('li').remove();
Update 2
Check this:
$('#imagess').on('click', 'a', function() {
$(this).prev('li').remove();
return false;
})
However, this is only for your invalid HTML, where the <a> lives directly inside <ul>. In correct way, the <a> should be inside the <li>, which I see is now fixed in another answer.
Related
I have this kind of HTML
<li class="one-reference per-reference ui-draggable" item-id="8" style="position: relative;">
<a class="moduleItemTitle" href="http://localhost/derrickpang/index.php?option=com_k2&view=item&id=8">Knee pains</a>
<span class="moduleItemDateCreated">Written on Wednesday, 19 October 2016 05:58</span>
<span class="moduleItemHits">Read 393 times</span>
<div class="clr"></div>
</li>
I have bind event on all LIs with class per-reference
I do not want to call function openRefModal when clicked on a tag with class .moduleItemTitle I just want to open that link in href as normal behaviour of anchor tag.
Here is what I have tried
jQuery(".per-reference").bind("click", openRefModal);
jQuery(".per-reference .moduleItemTitle").unbind("click", openRefModal);
Just add below code for a tag moduleItemTitle class
jQuery(".per-reference").bind("click", openRefModal);
jQuery(".per-reference .moduleItemTitle" ).click(function( event ) {
event.stopPropagation();
});
Now a tag is released from click event.
Here is the details about jQuery stopPropagation
Something like this should work:
$('.per-reference').click(function(event) {
event.preventDefault();
if (event.target.className !== 'moduleItemTitle') {
// do what you want here
}
});
$('.per-reference > .moduleItemTitle').click(function(event) {
event.preventDefault();
document.location = event.target.href;
});
Visit the Icomooon.io and check the function of display icon when we hover on menu ul and an icon appears on another div. Kindly send me the fiddle with their "hover to display an icon on another side" function.
Here is an small example:
$('ul li').hover(function() {
// mouse enter
var logo = $(this).attr("data-icon"); // get logo from data-icon parameter
$('.icon img').attr("src", logo); // change logo
}, function() {
// mouse left
$('.icon img').attr("src", "http://placehold.it/50x50"); // remove logo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="icon">
<img src="http://placehold.it/50x50">
</div>
<ul>
<li data-icon="http://lorempixel.com/50/50/">Item 1
</li>
<li data-icon="http://lorempixel.com/50/50/">Item 2
</li>
</ul>
This jQuery snippet changes the icon of the img element of the div with the icon class. It get's the logo from the data-icon parameter of the single li elements. If you enter the li element with the mouse (hover), it will change the icon. If you leave the mouse, it will go back.
Please notice: In this example are just placeholder images. You can use fixed images for that to get it working as expected.
have you ever examine jquery hoverIntent plugin ?
http://cherne.net/brian/resources/jquery.hoverIntent.html
Working example of on hover changing images
Javascript
$('#one').hover(function(){
$('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109255.svg" />')
});
$('#two').hover(function(){
$('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109099.svg" />')
});
$('#three').hover(function(){
$('#iconHolder').empty().prepend('<img id="theImg" width="20" height="20" src="http://image005.flaticon.com/1/svg/109/109066.svg" />')
});
HTML
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="iconHolder"></div>
<button id="one">one</button><button id="two">two</button><button id="three">three</button>
Here is a little challenge: I'm trying to replace all three <img ...> tags in the code below completely by another tag named <object ...>. I Tried with jQuery .replaceWith() but didn't get it.
$( document ).ready(function() {
$("div.gallery_content > div > ul > li:firstchild > img").replaceWith( "<object>...</object>" );
});
I can't change any of the classes or add any ID or class names. And I can't change the code in any way. I can just add some Javascript / jQuery in an .js file that is already attached.
What makes things even more difficult is the fact, that I have to add the Javascript to every page on the website, but the replacement should only take place on a subpage called «spots» (e.g. .com/cms/anything/spots).
This is the code:
<div class="gallery_content">
<div id="navkeys" style="visibility: hidden;"></div>
<div>
<ul style="width: 2281px; margin-left: 0px;">
<li style="margin-left: 0px;">
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
<li>
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
<li>
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
</ul>
</div>
</div>
Has anyone got a clue?
Once a dom element is created, the tag is immutable.
You would have to remove the image element and replace it with an object. So you would need to get all of the information you need and then add an object element.
So you could do something like this:
$("div.gallery_content > div > ul > li:firstchild > img").each(function() {
var src = $(this).attr('src');
var width = $(this).attr('width');
.
.
.
etc...
$(this).remove();
$('<object>...</object>').prependTo('li') //or whatever your selector is to prepend.
});
The other users have given the code for the replacement, but forgot to explain how the code must act to execute only in the target page
var targetPath = "com/cms/anything/spots";
$(window).load(function(){
currentPath = window.location.pathname;
//Checks if the current page coincides with the target page
if(currentPath.indexOf(targetPath)+targetPath.length === currentPath.length){
functionThatReplaces();
}
});
With this, the script will check if the page is the correct before executing the code.
You can create a new object element, with all the attributes of the old one and then replace the img tag.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/z9u5dxgu/2/
$(document).ready(function () {
$("div.gallery_content > div > ul > li > img").each(function () {
// create a new object
var $object = $('<object>');
$object.html($(this).html());
// copy all the attributes
var attributes = $(this).prop("attributes");
// loop through attributes and apply them to object
$.each(attributes, function () {
$object.attr(this.name, this.value);
});
$(this).replaceWith($object);
});
});
If it were not an img you would also copy the innerHTML using .html().
The end result of the JSFiddle looks like:
<li style="margin-left: 0px;">
<object src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;"></object>
<div class="gallery_details">Some Text</div>
</li>
The other minor detail you mentioned was matching a specific page only (difficult to test in a JSFiddle):
$(document).ready(function () {
if (window.location.href.indexOf("/cms/anything/spots") > 0){
$("div.gallery_content > div > ul > li > img").each(function () {
// create a new object
var $object = $('<object>');
$object.html($(this).html());
// copy all the attributes
var attributes = $(this).prop("attributes");
// loop through attributes and apply them to object
$.each(attributes, function () {
$object.attr(this.name, this.value);
});
$(this).replaceWith($object);
});
}
});
This is my shortcode of li.
<li>
<a href='#'><img src='img.png'/>
<h2 style='margin-top: 0px; padding-top: 0px'>test</h2>
<p><strong>{</strong><label>test</label><strong>}</strong></p>
<p><strong>test</strong></p>
<p><strong style='font-size: 17px; color: #fff'>10</strong>
<br/><span id='onoff'><img src='on.png'/></span>
<span id='delete'><img src='abc.png'/></span></p>
</a>
</li>
As you can see, the li contains to the whole html an <a href>, which will trigger a file when clicked. That said, I would like to detect the click of the images inside the span, both of them separately, <span id='onoff'> and <span id='delete'>
This is what I've tried so far without any result.
$('#page-main-listview ul li span').on("click", function(){
if(($this).attr("id") == 'onoff'){
// I dont know what to put here
// I need to find img now and trigger 'onClick()'
}
});
Edit: I think i've solved the issue, this way:
$('#page-main-listview').delegate('img', 'click', function(){
$atrr = $(this).attr("name");
alert($atrr);
if($atrr == 'on'){
}
});
You are using span IDs instead of classes within a list which leads me to believe you will have problems when adding more list elements.
To make things easier, <span data-tag="onoff" class="clickMe"> for the first image link and <span data-tag="delete" class="clickMe"> for the second. Then you can easily loop through with something like:
$('.clickMe').click(function() {
alert($(this).data('tag'));
});
I have a simple question yet it's not working out. See this html:
<div id="viewer">
<ul class="tj_gallery">
<li><img src="images/projecten/main/chicane.png" alt="" width="280" height="178" />01</li>
</ul>
</div>
The a.abhover is absolutely positioned inside the relative li. The a.abhover has display:none; in CSS. If I hover one li (it's a long list!) the a.abhover should fadeIn # 1000ms. Right now this is working, but only for every single one of those li's. See my jQuery code:
$(".tj_gallery li").hover(function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeIn("fast");
}, function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeOut("fast");
});
Adding $(this, ".tj_gallery li a.abhover") or $(".tj_gallery li a.abhover", this) doesn't help (it breaks it).
$(".tj_gallery li").hover(function(){
$("a.abhover", this).stop(true,true).fadeIn("fast");
}, function(){
$("a.abhover", this).stop(true,true).fadeOut("fast");
});