Delete html with js [duplicate] - javascript

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

Related

Parent with nested item also triggers child item

I have this sortable item list using jQuery UI Sortable, which is also able to nest items.
Each of these items contains toggable content, it will slide down when clicking on an item.
However, when clicking on the parent item when nested, instead of only toggling the parent content it's also toggling the child's content.
I've been trying to figure it out in my Jquery script but haven't been able to figure it out. I reproduced my issue in this fiddle:
https://jsfiddle.net/es3hbdnm/33/
Also HTML:
<ol class="sortable panel-group">
<li class="panel-default">
<div class="toggle">Home</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">About us</div>
<div class="panel-content">Hidden content</div>
</li>
<li class="panel-default">
<div class="toggle">Contact</div>
<div class="panel-content">Hidden content</div>
</li>
</ol>
My JS:
$(document).ready(function () {
$('.sortable').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div'
});
$(".panel-default").click(function ( event ) {
event.stopImmediatePropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content").slideDown();
});
});
You should slideDown only the first '.panel-content' found.
$(".panel-default").click(function (event) {
event.preventDefault();
event.stopPropagation();
$(".panel-content").not($(this)).slideUp();
$(this).find(".panel-content:first:hidden").slideDown();
});
Note, .find() returns a list of descendants of each element in the current set of matched elements. So in case the parent item is clicked the list will also include the child item. Reducing the set of matched elements to the first in the set should do the trick.
$(this).find(".panel-content").first().slideDown();
EDIT: Besides this, my suggestion is to use the following to be able to slide up a previously slided down element. See also my updated fiddle. Note, the selector you have provided to .not does not match asthisis a ".panel-default" node rather than a ".panel-content" node.
$(".panel-content").not($(".panel-content:first", this)).slideUp();
jsFiddle

Use jQuery to target a class within a div and perform additional changes within the same div

I have the following HTML code:
<div class="pack1">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack2">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack3">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
[...]
<div class="pack10">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
Using jQuery I would like to trigger an event on clicking the a tag with the optionButton class but I don't know how to limit the event to the div that the a tag resides in.
For example right now I have something like:
$(document).ready(function(){
$('.optionButton').click(function() {
$(".optionButton").removeClass('checked');
$(this).addClass('checked');
});
});
It works fine for the first selection, lets say when I click the First option in the pack1 div, but if I make another selection, lets say Third option in the pack3 div, the first one will disapear.
Also, there must be only one selected option for each pach.
You need to narrow down the selection of your removeClass, as right now it's selecting every occurrence of optionButton.
$(document).ready(function(){
$('.optionButton').click(function() {
$(this).siblings('.optionButton').removeClass('checked');
$(this).addClass('checked');
});
});
This will narrow it down by selecting siblings of the clicked element that have the class optionButton.
JSFiddle
EDIT: Woops, put the wrong class in there. Should be patched up now.
Because exact DOM structure is highly subject to change, your best bet is to almost always go to the parent and search your way down like so:
1) $(this).parent().find(".optionButton").removeClass("checked");
or you can simplify the selector results set (and make your code slightly more efficient) by saying:
2) $(this).parent().find(".checked").removeClass("checked");
You can also use the selector context parameter like so:
3) $(".checked", $(this).parent()).removeClass("checked");
The difference between 2 and 3 is purely syntactic. jQuery will convert 3 into 2 behind the scenes
I think this could work
$(document).ready(function(){
$('.optionButton').click(function() {
var parent = $(this).closest("div");//getting the parent content
parent.find(".optionButton").removeClass('checked');//remove the checked
$(this).addClass('checked');
});
});

JavaScript slideToggle not working

I've run into a little something that I can't figure out and I was wondering if you could have a go at it.
First off, there's this code:
<li class="mc002">
<ul>
<li>
<div class="label-container">
<a class="btn">label 1</a>
<a class="btn">label 2</a>
</div>
<div class="main-container">
<div class="prj-title">
<h3>New design for my website</h3>
<div class="buttons">
<button data-role="none" class="btn smry">summary</button>
</div>
</div>
<div class="summary">
</div>
<div class="prj-footer">
<h6>filed under:</h6>
<span>webdesign, webdevelopment, UX design</span>
<h6>skills:</h6>
<span>html5, css3, javascript, php</span>
</div>
</div>
</li>
and the JavaScript to make "summary" slide down:
$('.main-container .smry').click(function () {
$(this).closest(".summary").slideToggle(100);
});
The problem with this is that it doesn't work. Can you help me out, please?
The .closest() method doesn't find siblings or cousins, it starts with the current element (.smry, in your case) and goes up through the ancestors, stopping when it finds a match (or returning an empty jQuery object if there is no match).
Try this instead:
$('.main-container .smry').click(function () {
$(this).closest(".main-container").find(".summary").slideToggle(100);
});
This navigates up to the closest containing .main-container element and then uses .find() to go back down to its associated .summary element.
Demo: http://jsfiddle.net/4a8JC/
Note that your code would need to be in a document ready handler and/or in a script block that appears after the elements in question.
(Note also that your summary div would need to have some actual content for this to make sense.)
I'll suggest to use just $(".main-container .summary") instead of closest. It's a little bit heavy operation. And do you have something in .summary. If it is an empty I don't think that you will see something.

How to remove cloned elements

With Jquery, I am trying to make a function similar to the filtering system used in this website(example)
If you click one of the filter elements, it will be displayed in another area. You can remove the selected filter by just clicking it.
My code works for cloning a filter element and displaying it in another area but
I am having a trouble with removing it.
I did hours of research but could not find any solution so your help will be greatly appreciated!
Here is my code
---html---
<div id="filter-selected>
<ul>
<!--selected element comes here -->
</ul>
</div>
<div id="filter-options">
<ul>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value1</span>
</li>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value2</span>
</li>
</ul>
</div>
---Jquery---
$('#filter-options > ul > li').click(function(event){
var $filter = $(this).children('span').clone();
$filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});
$(.filtering').click(function(){
$(this).remove();
});
Since the elements are created dynamically, You need event delegation
$('#filter-selected').on('click', '.filtering', function(){
$(this).remove();
});
You are missing string quote on left side ' of .filtering which might be a problem.
$(.filtering').click(function(){

get <cite> tag value Onmousedown event

HTML code looks like:
<ul>
<li class="result">
<h3 class="title"><a class="someclass" href="url">Sometext</h3>
<cite class="url">Cite URL-1</cite>
</li>
<li class="result">
<h3 class="title"><a class="someclass" href="url-1">Some more text</h3>
<cite class="url">Cite URL-2</cite>
</li>
</ul>
I have to get cite value(cite URL) on click of a href.
Something like:
$('a[class="someclass"]').mousedown(function() {
console.log($('cite').text()) //if first link clicked then Cite URL-1 should get returned
}
How to get cite tag value in this case?
I'd suggest:
$('.someclass').click(function(e){
e.preventDefault(); // prevent the click from reloading the page or navigating
var cite = $(this).closest('li').find('cite');
console.log(cite.text());
});
References:
click().
closest().
find().
text().
You're looking for jQuery's .click() event.
Try this:
$('a[class="someclass"]').click(function() {
var text = $(this).parents('.result').find('cite').html();
}
You need to get the immediate next cite element to the hyperlink(to get its text) first. Something like console.log($(this).parent().next()[0].innerHTML)

Categories