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');

Fetching value from tag without using id or class

<div class="typeahead-result">
<ul class="typeahead-list">
<li>
<a data-index="0" data-group="Restaurant" href="javascript:;"><strong>Cafe</strong> Hollywood <small style="color:#999;">Restaurant</small></a>
</li>
<li>
<a data-index="1" data-group="Estb" href="javascript:;"><strong>cafe</strong><small style="color:#999;">Estb</small></a>
</li>
</ul>
</div>
Here I am having the text value of <a> tag that is "Cafe Hollywood" and I want its attribute value for data-group="?"

You can use:
$('[data-group="Estb"] small').text();

Instead of <small>, you could use <span id="spanId" style="font-size:small">
Then you would be able to call the span in your javascript. Yes, your version is a bit shorter, but in the long run you want to avoid deprecated tags like <small>, <underline>, <b>, etc exactly because of problems like this

Yes, you can directly get the value of each small tag, as follows:
var my_small_value;
$('li').getChildren().find('small').click(function(){
my_small_value = this.text();
alert(my_small_value);
});

Try this
alert($("li").eq(1).find("a").attr("data-group"));

Using Javascript Regex to get part of Href During Mouseover

I has this Html Code below
<div class="first-div">
<ul>
<li>PHP</li>
<li>CSS</li>
<li>HTML</li>
</ul>
</div>
<div class="second-div"></div>
i want when mouseover on PHP,CSS and HTML Link:
Create The Javascript REGEX to get only (php,css,html) without # sign from href in first-div.
then add (php,css,html) as ID to second-div.

You don't need a regex, the part after the # is a hash, and is available directly.
$('a').on('mouseover', function(e) {
e.preventDefault();
$('.second-div').prop('id', this.hash.substr(1));
});
Not sure why you would ever set the ID dynamically, but whatever floats your goat !

dynamically assign text to <a> from <li>

Using jquery 1.8.3
I am creating a function which creates an "li" element and sets some properties, including establishing an event listener.
$(this).closest('a').text(text); //$(this) is the li tag, and it does show that in the browser if you step through
The dom structure looks like this:
<div>
<a></a>
<div>
<ul>...</ul>
</div>
</div>
If you follow it in the debugger, both the .text() method and "text" variable are being populated with the correct info. There is something going on with the assignment part that I can't track. I am sure it is something stupid and obvious I am missing, but I could use some help getting over this hump.
If you need more info, please let me know.

The anchor tag is not the ancestor of the li .. Rather it is a sibling of the div in which it is encased..
You are looking for this I belive
$(this).closest('div').prev('a').text(text);

You have to use html() function from jQuery:
$(document).ready(function(){
$("#element li ").click(function(){
$("#linki").html($(this).html());
});
});
<a href="" id="linki" ></a>
<a></a>
<div>
<ul id="element">
<li>Hello</li>
</ul>
</div>
live example http://jsbin.com/opoqid/46/edit

jQuery .bind() selector

I'm trying to bind a click event to an anchor and I can't figure out the right selector... Is bind() particularly picky with selectors?
Here's my code which does not work:
$(".ui-navbar").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
The following code does work but causes the whole body to appear like it is being clicked on an Android smartphone (ugly yellow box around the anachor).
$("body").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
This is the html:
<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-search">Search</span></span></span>
</li>
<li class="ui-block-b">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-location">Location</span></span></span>
</li>
<li class="ui-block-c">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-settings">Settings</span></span></span>
</li>
</ul>
</div>

live is deprecated. Use on instead.

If you want to have a click event on the anchor elements in .ui-navbar and the HTML is static HTML that exists at page load time, then you can just use this:
$(document).ready(function() {
$(".ui-navbar a").click(function() {
navigateToPage("location.html", { });
});
});
That will make the <a> tags in that piece of your HTML clickable. But, those <a> tags have no content to them and thus no size so nobody will be able to click on them until you give them some content.
If your problem is something different than this, please explain.
If the content is added dynamically via script, then you can use .live() like this:
$(document).ready(function() {
$(".ui-navbar a").live("click", function() {
navigateToPage("location.html", { });
});
});