We Keep Coding

i want to remove the parent of the parent of 'this' in jquery

I have a span .icon-trash in a div parent in another div parent I want when I click it to remove .item-append and I have many of the .item-append
<div class="item-append">
<div class="cont1">
<img src="">
</div>
<div class="cont2">
<span class="qua">
<span class="icon-trash"></span>
</span>
</div>
</div>
I tried jQuery but a don't know what should I put in the selector
$('.icon-trash').on('click', function () {
$(selector).remove();
});

To remove the .item-append element when the .icon-trash element is clicked, you can use the following code:
$('.icon-trash').on('click', function() {
$(this).closest('.item-append').remove();
});
In the code above, this refers to the .icon-trash element that was clicked. The closest() method is used to find the nearest ancestor element that matches the given selector (in this case, .item-append).
Alternatively, you could also use the following code to achieve the same result:
$('.icon-trash').on('click', function() {
$(this).parent().parent().remove();
});
In this case, the parent() method is used twice to move up the DOM tree from the .icon-trash element to its parent .cont2 element, and then to its parent .item-append element, which is then removed.

If you just want to remove the class form the .item-append, try this
$('.icon-trash').on('click', function () {
$(this).closest('.item-append').removeClass('item-append');
});
https://api.jquery.com/removeclass/

How to get element with tag name having specific attribute in jquery or angularjs

I have a div having many tags inside. I want to bind the click event on all text elements that have x attribute.
I have tried
$('#attendacneLineChart').find('text')
but this returns all the text elements. But I need only those text element that has x attribute.

use
$('#attendacneLineChart').find('text[X]')
if you want to ignore some elements with specific attr you can use :not
$('#attendacneLineChart').find('text[X]:not([y])') // for more use 'text[X]:not([y]):not([z])'

I want to bind the click event on all text elements that have x attribute.
Create directive for this:
.directive('x', function() {
return {
link: function(scope, element) {
element.click(function() {
console.log('clicked')
})
}
}
})

You can use jquery [attribute='value'] selector to finding element has specific attribute.
$("div > p[myAttr]").click(function(){
console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Text1</p>
<p myAttr="1">Text2</p>
<p>Text3</p>
<p myAttr>Text4</p>
</div>

Traverse(get) elements wrapped inside <a> tag?

I have got something like:
<a class="feature category">
<div class="feature-txt left">
<p id="first">innerHTML</p>
</div>
<div class="feature-go left center">
<i class="fa fa-angle-right fa-fw"></i>
</div>
</a>
On clicking I want to get text inside p tag, but:
$('.category').on('click', function() {
alert($(this).find("p").innerHTML);
});
is not working. How can I get it?

$(this).find("p") returns the jquery object of dom element. you can not use javascript methods on them directly.
1) Either convert the object to javascript
$('.category').on('click', function() {
alert($(this).find("p")[0].innerHTML);
});
2) or use .text() or .html() methods of jquery
$('.category').on('click', function() {
alert($(this).find("p").text());
});

use below code . use .text() or .html() functions of jquery
$('.category').on('click', function() {
alert($(this).find("p").text());
});
or
$('.category').on('click', function() {
alert($(this).find("p").html());
});

won't work because div and p are not child nodes of a tag.
You are still misunderstood it. As per your markup, one can easily says that div and p are the child nodes of anchor.
Issue is .innerHTML javascript method you are binding this method to a jQuery object, while you need to have a DOM Node to use it, so either you can use [0] suffix to convert it to the DOM Node or use .get(0) for the same in jquery.
To use innerHTML
$('.category').on('click', function() {
alert($(this).find("p")[0].innerHTML);
alert($(this).find("p").get(0).innerHTML);
});
or another way is to use .html(), .text() of jQuery which also does the same:
$('.category').on('click', function() {
alert($(this).find("p").html());
alert($(this).find("p").text());
});

how to remove a div on the basis of a class using jQuery

I'm using this to remove the div whenever I call my showresult(); function. I am dynamically creating this div <div class="sampageswrapper">, so this needs to be removed when ever showresult() is called.
function showresult(data) {
jQuery('.sampageswrapper div').remove();
// rest of my code.
}
But unfortunately this div is not removing.
<div class="sampageswrapper">
<div id="image_div" class="img_class" name="image_div">
..........
</div>
</div>

you can use the .samepageswrapper selector only
jQuery('.sampageswrapper').remove();
it should target that specific div.
when you use .sampageswrapper div as your selector, this targets all the div's inside the div element with sampageswrapper class

Toggle css of 1 of multiple classes of the same name

I have dynamically created divs..
<div class="container"></div>
Each div has an input element within it..
<div class="container">
<input type="button" class="container_button" value="toggle" />
</div>
My goal is to minimize only the container div of the button clicked..
$('.container_button').onclick(function() {
$('.container').css('height','20px');
});
How can I achieve this when multiple divs of the same class exist?

jQuery object doesn't have onclick method, you can use on method instead, as you are generating the element dynamically you should also delegate the event.
$(document).on('click', '.container_button', function() {
$(this).parent('.container').css('height','20px');
// ^--- clicked element
});

You need to find .container relative to the DOM element that was clicked.
$('.container_button').click(function () {
$(this).closest('.container').css('height', '20px');
});