We Keep Coding

Delete html with js [duplicate]

I have some list item tags in my jsp. Each list item has some elements inside, including a link ("a" tag) called delete. All that I want is to delete the entire list item when I click the link.
Here is the structure of my code:
$("a").click(function(event) {
event.preventDefault();
$(this).parent('.li').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="191" class="li">
<div class="text">Some text</div>
<h4>Text</h4>
<div class="details">
<img src="URL_image.jpg">
<span class="author">Some info</span>
<div class="info"> Text
<div class="msg-modification" display="inline" align="right">
<a name="delete" id="191" href="#">Delete</a>
</div>
</div>
</div>
</li>
But this doesn't work. I'm new at jQuery, so I tried some things, like for example:
$(this).remove();
This works, it deletes the link when clicked.
$("#221").remove();
This works, it deletes the indicated list item, but it's not "dynamic".
Can someone give me a tip?

Simply use the .closest() method: $(this).closest('.li').remove();
It starts with the current element and then climbs up the chain looking for a matching element and stops as soon as it found one.
.parent() only accesses the direct parent of the element, i.e. div.msg-modification which does not match .li. So it never reaches the element you are looking for.
Another solution besides .closest() (which checks the current element and then climbs up the chain) would be using .parents() - however, this would have the caveat that it does not stop as soon as it finds a matching element (and it doesn't check the current element but only parent elements). In your case it doesn't really matter but for what you are trying to do .closest() is the most appropriate method.
Another important thing:
NEVER use the same ID for more than one element. It's not allowed and causes very hard-to-debug problems. Remove the id="191" from the link and, if you need to access the ID in the click handler, use $(this).closest('.li').attr('id'). Actually it would be even cleaner if you used data-id="123" and then .data('id') instead of .attr('id') to access it (so your element ID does not need to resemble whatever ID the (database?) row has)

what about using unwrap()
<div class="parent">
<p class="child">
</p>
</div>
after using - $(".child").unwrap() - it will be;
<p class="child">
</p>

Use parents() instead of parent():
$("a").click(function(event) {
event.preventDefault();
$(this).parents('.li').remove();
});

Delete parent:
$(document).on("click", ".remove", function() {
$(this).parent().remove();
});
Delete all parents:
$(document).on("click", ".remove", function() {
$(this).parents().remove();
});

I have stumbled upon this problem for one hour. After an hour, I tried debugging and this helped:
$('.list').on('click', 'span', (e) => {
$(e.target).parent().remove();
});
HTML:
<ul class="list">
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
<li class="task">some text<span>X</span></li>
</ul>

You could also use this:
$(this)[0].parentNode.remove();

$('#' + catId).parent().remove('.subcatBtns');

Jquery on method firing only once

I am having a problem here, i want to add and remove a class to a element and I am using on() method to handle the click event on body. The code works on the first click but after the first click it wont handle the event anymore!
Below is the code:
$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
var navigation = $(this).parents().find('#cshero-header-navigation');
if(!navigation.hasClass('collapse')){
navigation.addClass('collapse');
}else if(navigation.hasClass('collapse')){
navigation.removeClass('collapse');
}
});
This is a problem I am having with menu icon that appears on mobile and tablets and I want to open and close the menu when clicked!
I tried putting an alert just below the first line of code and it will alerts only once! Any help is appreciated!
<div id="cshero-header-navigation" class="col-xs-12 col-sm-7 col-md-9 col-lg-9 phones-nav" style="z-index:999999;">
<div class="navigation-main">
<div class="cshero-navigation-right hidden-xs hidden-sm icon-search-hidden">
<div class="nav-button-icon">
</div>
</div>
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="nav-menu menu-main-menu">
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
<li>links</li>
</ul>
</div>
</nav>
</div>
<div id="cshero-menu-mobile" class="collapse navbar-collapse">
<i class="cms-icon-menu pe-7s-menu"></i>
</div>
This is my html code. In mobile view the menu will be opened only once!

So the issue is with your code: you forgot to include a comma , between #cshero-menu-mobile and .cms-icon-menu. Below is the recommended solution:
$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){
var navigation = $(this).parents().find('#cshero-header-navigation');
if(!navigation.hasClass('collapse')){
navigation.addClass('collapse');
}else if(navigation.hasClass('collapse')){
navigation.removeClass('collapse');
}
});
Rather than using on, you could simply use the click handler as well like so $('body').click('#cshero-menu-mobile, .cms-icon-menu', function(){... which would still work.
From what I can deduce, it would appear that you're trying to imitate Bootstrap's accordion. I would recommend you use that instead.

Try this:
$('body').on('click', '#cshero-menu-mobile .cms-icon-menu', function(){
$(this).parents().find('#cshero-header-navigation').toggleClass("collapse")
});

To every one interested, I fixed the problem, just changed the first line from
$('body').on('click', '#cshero-menu-mobile, .cms-icon-menu', function(){
to
$('body').click(function(){
this seams to bind the click event directly to body so a simple solution!

Using "dialogclose" event in jQuery mobile

I would like an image to change once clicked and change back once the dialog it links to is closed.
I actually found a solution to what I was trying to do on this site, right here However, upon modifying it to suit my needs it does not work, Can anybody pinpoint what I am missing?
HTML:
<div data-role="footer" data-position="fixed" data-id="myFooter">
<div class="navBar" id="bah" data-role="navbar">
<a href="#menu" id="burgerMenu" data-rel="popup">
<img id="burger" src="resources/burger.png" alt=""/>
</a>
</div>
</div>
jQuery:
$(document).ready(function()
{
$("#bah").on("dialogclose", function(event)
{
$("#burger").attr("src","resources/burger.png");
});
});

Use jQM pagecreate event instead of the regular jQuery ready
For popup clode, the correct event is popupafterclose
The popup id in your example is menu not bah.
$(document).on("pagecreate","#page1", function(){
$("#menu").on("popupafterclose", function(event) {
$("#burger").prop("src","http://lorempixel.com/24/24/technics/1/");
});
});
DEMO

JQuery UI working on chrome but not firefox

My code is simple. It can be found at this jsFiddle:
<div id="tabs">
<ul>
<li>About</li>
<li>Fine Print</li>
<li>Location</li>
</ul>
<div id="highlights">
highlights
</div>
<div id="fineprint">
FiNEPRINT
</div>
<div id="location">
<ul>
<li>
<address>ADDRESS</address>
</li>
<li>
MAP
</li>
</ul>
</div>
<button class="btn-placeorder"><span id="maplink">View map</span></button>
<script>
$(function(){
$("#tabs").tabs();
});
$('#maplink').click(function(){
$("#tabs").tabs("option","active",2);
});
</script>
On Firefox you will notice, even in the fiddle the tabs don't change when the view map button is clicked.
I don't work with javascript much but I'd love to gain a better understanding of how to diagnose and solve these problems. Why is this happening, how can I solve it and how can I better educate myself?

First debugging tip: use tools. Most browser's nowadays include debugging tools you can call with F12. In Firefox, the short-cut is Cmd+Opt+K or Ctrl+Shift+K though I recommend you open the add-on manager and install Firebug.
Second tip: check whether your code runs. The console API is a good start:
$('#maplink').click(function () {
console.log("Button clicked");
$("#tabs").tabs("option", "active", 2);
});
Nothing gets printed so your event is not being called. We can see it isn't attached directly to the button but to an inner <span>:
<button class="btn-placeorder"><span id="maplink">View map</span>
</button>
So we wonder: is there something wrong with onclick events on spans?
$("span").on("click", function(){
console.log("click on span: %o", this);
});
Nothing printed, so there's apparently an issue. It is possible that the button is catching the onclick event?
<button class="btn-placeorder"><span id="maplink">View map</span>
</button><span>Test span</span>
click on span: <span>
So that it's! Weird... Well, why do you need a <span> in the first place?
$('.btn-placeorder').click(function () {
console.log("Button clicked");
$("#tabs").tabs("option", "active", 2);
});
It works! All we need now is some cleanup, such as assigning a proper ID to the <button> and getting rid of the redundant <span>.

Your #maplink selector matches your inner <span> element, not its <button> parent.
Try writing:
<button id="maplink" class="btn-placeorder"><span>View map</span></button>
Instead of:
<button class="btn-placeorder"><span id="maplink">View map</span></button>

Replace the id of the span with the actual class of the button, like this:
$('.btn-placeorder').click(function(){
$("#tabs").tabs("option","active",2);
});

Even if other answers are also correct, there could be another problem, the on click event handler registration is happening outside dom ready.
Try
$(function() {
$("#tabs").tabs();
$('#maplink').click(function() {
$("#tabs").tabs("option", "active", 2);
});
});
Demo: Plunker

Prototype Hover Content and Children

I am using:
Event.observe(window, 'load', function() {
$$('li').invoke('observe', 'mouseover', function(event) {
this.children[0].toggle();
});
$$('li').invoke('observe', 'mouseout', function(event) {
document.children[0].toggle();
});
});
<ul>
<li>
<div style="display:hidden;">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
To display a hidden div within an element when that element is moused over. It is partially working, however my code looks like the following:
When I rollover the li it displays the hidden div, however if I rollover the second div it hides the comment again, even though this div is in the li. Why? I found this questions, but it doesn't seem to work either for this context.

No need to use prototype or javascript for this, use css
li.item:hover div.entry {
display:block
}
li.item div.entry {
display:none
}
you don:t use any css classes in your example code, but I would strongly recommend you do so for this case
<ul>
<li class="item">
<div class="entry">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>

Add a class to the div that you want to perform the toggle on. Then inside the event handler use this.select() to find children with that class name.
<ul>
<li>
<div class="hidden">Hidden Div</div>
<div>More content that isn't hidden</div>
</li>
</ul>
Event.observe(window, 'load', function() {
var lis = $$('li');
var toggleFunc = function(event) {
this.select('.hidden').toggle();
}
lis.observe('mouseover', toggleFunc);
lis.observe('mouseout', toggleFunc);
});

A quick solution would be to use this plugin which adds "mouseEnter" and "mouseLeave" functionality for non-IE browsers.