How to remove a div in the parent structure? - javascript

I am trying to remove some elements using a link. The elements that I am trying to remove are in a link's parent div, but i cannot seem to remove them.
Here is the HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="javascript:void(0)">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="javascript:void(0)">Remove Answer Space</a>
Here is the JQuery:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent.$(".QR-answer-holder").$(".QR-answer-label").remove();
$(this).parent.$(".QR-answer-holder").$(".QR-answer-input").remove();
});
Is there anyway to make it so the remove button removes the label and input closest to the end of the div? (or does it do that automatically)?

You're accessing the .parent() node from that anchor .new-qr-answer-space.
Infact, you need to get the .sibling(), since the div.QR-answer-holder is not the parent node:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).siblings(".QR-answer-holder").find(".QR-answer-label:last, .QR-answer-input:last").remove();
});

try
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent().find($(".QR-answer-holder").remove();
});
and it should remove the lable and input as those are inside the placeholder

see siblings:
$(this).siblings('.QR-answer-holder .QR-answer-label').remove();
this would remove the elements '.QR-answer-holder .QR-answer-label' from the same dom node as this.

Try using this
HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="#">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="#">Remove Answer Space</a>
JavaScript:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function(e) {
e.preventDefault();
$(this).siblings(".QR-answer-holder").find(".QR-answer-label,.QR-answer-input").remove();
});

parent is a method, not a property. There is no $ method in the jQuery object, you use the find method to locate children:
$(this).parent().find(".QR-answer-holder .QR-answer-label").remove();
$(this).parent().find(".QR-answer-holder .QR-answer-input").remove();
Edit:
As you actually want to get the closest sibling before the link, you should use the prev method instead:
$(this).prev().find(".QR-answer-holder .QR-answer-label").remove();
$(this).prev().find(".QR-answer-holder .QR-answer-input").remove();
Or if you want to remove all elements in the div, simply:
$(this).prev().empty();

Related

Jquery: Select class where $(this) is

I want to select a div using its class, but there are other divs with the same class and with the same buttons that trigger my function, so I only want to select the class where $(this) is in.
I tried .parent, .child, .contains, .find but I didn't figure it out...
$(".btt_class").click(function() {
// I know this is wrong, but to give an idea of what I need
$(".div_class").has(this).append("You cliked here");
});
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
If I understand your request correctly, your snippet does just what you described: selecting the div, the currently clicked button is in and appending some text to it:
Pleas check out https://jsfiddle.net/4qwy605p/
$(".btt_class").click(function() {
$(".div_class").has(this).append("You cliked here");
});
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
<div class="div_class">
<input class="btt_class" type="button" value="Click me" />
</div>
It works as requested in the fiddle.
Is it possible you just forgot to load jQuery in your snippet?
this should do the trick: (OOPS, edited to include finding the closest one.)
$(".btt_class").on("click",function(){
myDiv = $(this).parent().closest('div.div_class');
myDiv.append("You clicked here");
});
To capture the element of the button being clicked you can do this:
$(".btt_class").click(function() {
$this = $(this); // captures the input element
$div_class_elem = $this.parent(); // goes up one level/element to capture the div element
$div_class_elem.append("You clicked here"); // append this text to the end of the div element
});
Use .closest() to traverse up the DOM tree up to the specified selector. This should do the trick:
$(this).parent().closest('div').append("You clicked here!")

insert / delete balise

I want to add a p tag in a div tag when I click a button, and also when I click on a p tag i want to delete the p tag I clicked on.
This is my Jquery:
$('#ajou').click(function(){
alert( $('#skill').val());
$('#skills').append('<p>'+$('#skill').val()+'</p>');
});
$("p").click(function(){
$(this).remove();
});`
And this is my HTML:
<input type="text" id="skill" name="skill">
<button id="ajou" name="ajou">Valide</button>
<br><br>
<div name="skills" id="skills"><p>hello</p> </div>
To be specific, when I click on the button Valid the text I entered in the input is add to my <div> but when I want to delete it I can't, only <p>hello</p> will remove it when I click on it.
Slight change to your event handler to give it scope:
$('#skills').on('click', 'p', function(){
$(this).remove();
});
This allows the event to be bound to the skills and thus allow all paragraphs (p) to be removed from within that scope. Binding to the p element only binds to the currently existing paragraphs (anywhere in the document) and not those added.
Edited to full sample and to only remove <p> elements when clicked on. Works for both static and dynamic <p> elements.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input type="text" id="skill" name="skill">
<button id="ajou" name="ajou">Valide</button>
<br><br>
<div name="skills" id="skills"><p>hello</p> </div>
JAVASCRIPT:
$('#ajou').click(function(){
alert( $('#skill').val());
$('#skills').append('<p>'+$('#skill').val()+'</p>');
});
$(document).on('click', '#skills p', function(events){
events.target.remove();
});
The latter is to bind the removal function to the parent element (#skills) simply because the children will be dynamically added later, so could not be bound beforehand. Once you catch the click on the parent it is possible to remove the clicked child <p> (targeted element).
$('div', {
id: 'foo',
name: 'anything',
title: 'adding these attributes is not necessary',
text: 'Waow, I am one sexy p tag'
}).appendTo($('.myDiv'));

Javascript/jQuery watch for CSS Changes

I have a simple dropdown that opens up a search field when you click it. Even though I have the text field of this search set to autofocus, it's not working for all browsers.
What method of Javascript/jQuery would I use to check if the containing UL css display is set to block, so that I can force the focus to be on the field using .focus().
HTML:
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.
check the dom element in set intervals to see if its css has changed
trigger an event when the css of the dom element is changed by user interaction/your code.
the first way will look something like this:
var element = $(".dropdown-menu");
function checkForChanges()
{
if (element.css('display') == 'block')
{
// do your .focus() stuff here
}
setTimeout(checkForChanges, 500); // does this every half second.
}
or the second way:
$('.toggle').on('click', function() {
$('.dropdown-menu').toggle();
$('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
if($(this).css(.css('display') == 'block')
{
// do your .focus() stuff here
}
});
You can check the display value of the ul using pure JavaScript with this:
JS:
var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
//do what you want.
}
Or using jQuery:
if ($('.dropdown-menu').css('display') === 'block') {
//do what you want.
}
It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.
Html
<div class="quickSearchContainer">
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
</div>
Javascript
$('#quickSearchContainer').on('show.bs.dropdown', function () {
$('#inputSearch').focus();
});
I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!

Get the value of text field using jquery

I have this html code
<div class="sub-middle-column">
<div class="div-header">Grandsire
<a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a>
<ul class="table-controls hide side-action-items">
<li>
<a data-remote="true" data-box-no="1" class="find_or_add_horse" href="#">Find/Add Horse</a>
</li>
<li>
Go to the Next Horse
</li>
</ul>
</div>
<input type="text" name="search" id="search" class="search_horse">
</div>
on clicking on find_or_add_horse link I want to get the value of the text field using jquery. I tried parent, child and closest but could not get the result. How can I get the value of text field?
$(document).on('click', '.find_or_add_horse', function(){
// on clicking on find/add horse link I need the value of text field here
});
http://jsfiddle.net/jFIT/pyPtW/
You can use parents to find the root element, then use find on that element to get the input.
console.log($(this).parents('.sub-middle-column').find('.search_horse').val());
Try this
$(document).on('click', '.find_or_add_horse', function(){
var value = $('#search').val();
});
JsFiddle
use .val():
$(document).on('click', '.find_or_add_horse', function(){
alert($('#search').val());
});
if you have multiple sub-middle-column div then try this:
$(document).on('click', '.find_or_add_horse', function(){
alert($(this).closest('.sub-middle-column').find('.search_horse').val());
});
You can try the code below
$(document).on('click', '.find_or_add_horse', function(){
var textValue= $('#search').val();
});
.val(); is for input fields, .text() for other html containers like p, div..
AND dont forget to $.trim(); the input, cos hopefully you dont want whitespaces around the input text
try this:
$(document).on('click', '.find_or_add_horse', function(){
var inputtextvalue = $.trim($("#search").val());
});

jquery - using .closest()

I'm stucking with jQuery where I need to use closest to get the .text() of the wanted element.
Here is the HTML:
<div class="endorse-set">
<div class="endorse">
<span class="keyword" id="keyword-1">web developer</span>
<textarea class="comment" id="comment-1"></textarea>
<input type="button" class="endorse-button" id="endorse-button-1" value="Endorse">
</div>​​​​​​​​​​​​​​​​​​​​​​
<div class="endorse">
<span class="keyword" id="keyword-2">web designer</span>
<textarea class="comment" id="comment-2"></textarea>
<input type="button" class="endorse-button" id="endorse-button-2" value="Endorse">
</div>​​​​​​​​​​​​​​​​​​​​​​
<div class="endorse">
<span class="keyword" id="keyword-3">Entrepreneur</span>
<textarea class="comment" id="comment-3"></textarea>
<input type="button" class="endorse-button" id="endorse-button-3" value="Endorse">
</div>​​​​​​​​​​​​​​​​​​​​​​
</div>
I need to get the .text() i.e. web designer or web developer or entrepreneur and the .comment value, when the user clicks .endorse-button
I tried like this and failed:
$(".endorse-button").click(function(){
var keyword = $(this).closest('span.keyword').text();
var comment = $(this).closest('textarea.comment').val();
alert(keyword);
alert(comment);
});
I'm getting nothing. Could you help me?
P.S. I'm new to jQuery!
Thanks!
The closest method looks at ancestor elements (e.g. the parent div.endorse, and the parent of that etc). The elements in question are siblings, so you can use the siblings method:
$(".endorse-button").click(function(){
var keyword = $(this).siblings('span.keyword').text();
var comment = $(this).siblings('textarea.comment').val();
alert(keyword);
alert(comment);
});
This is how I would use .closest() in this situation:
$('.endorse-button').click(function(){
var endorse = $(this).closest('.endorse'),
keyword = endorse.find('span.keyword').text(),
comment = endorse.find('textarea.comment').val();
alert(keyword);
alert(comment);
});

Categories