Insert after parent of element - javascript

What sort of selector would be I need in order to insert after the parent (divouter) of the test3 class in the example below? Thanks.
<div class='divouter'>
<div class='divinner'>
<input class=test1></input>
</div>
</div>
<div class='divouter'>
<div class='divinner'>
<input class=test2></input>
</div>
</div>
<div class='divouter'>
<div class='divinner'>
<input class=test3></input>
</div>
</div>
<div class='divouter'>
<div class='divinner'>
<input class=test4></input>
</div>
</div>

You could use the $.after() method:
$(".test3").closest(".divouter").after("<div>Foo</div>");
Or the $.insertAfter() method:
$("<div>Foo</div>").insertAfter( $(".test3").closest(".divouter") );

.divouter:parent

I think you want the "after()" method:
$('input.test3').focus(function() {
$(this).closest('div.divouter').after('<div>Hi!</div>');
});

Related

append() is not working properly in jquery?

I'm using append first this is copy one line but second time this is copy two line. what is the wrong?
I want just single line clone on button click how can i do this?
My Code:-
$(function() {
$('.add-more-room-btn').click(function() {
let addMoreRoomClone = $(this).parents('.room-info').find('.row:first').html();
$(this).parents('.room-info').find('.row').append(addMoreRoomClone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>
I hope it helps you, please check the snippet.
$(function() {
$('.add-more-room-btn').click(function() {
let addMoreRoomClone = $(this).parents('.room-info').find('.row .col-md-12:first').clone();
$(this).parents('.room-info').find('.row').append(addMoreRoomClone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>
obviously you append to .row, so next klick all those contents will be copied, look at my example which prepends to .room-info it will kinda work
$(function() {
$('.add-more-room-btn').click(function() {
let addMoreRoomClone = $(this).parents('.room-info').find('.row:first').html();
$(this).parents('.room-info').prepend(addMoreRoomClone);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>
Your "lines" are .row .col-md-12:first, but you are selecting first .row (that is only one row in whole document) and appending it's .html(). Change selector and properly copy it's contents:
$(function() {
$('.add-more-room-btn').click(function() {
// Make copy of whole element
let newContent = $('<div>').append($(this).parents('.room-info').find('.row .col-md-12:first').clone()).html();
console.log(newContent);
$(this).parents('.room-info').find('.row').append(newContent);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="room-info">
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="this need to copy" />
</div>
</div>
<button class="add-more-room-btn">Add More</button>
</div>

How to remove div elements within specific div id

I want to remove all div elements with class facebook, twitter, LinkedIn, googlePlus who has parent id show-share-count
How to do this?
$("div").remove(".facebook");
$("div").remove(".twitter");
$("div").remove(".linkedIn");
$("div").remove(".googlePlus");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
you can do this just only one line in script section.
<script>
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus").remove();
</script>
Just use following script for this
$('#show-share-count .facebook, #show-share-count .twitter, #show-share-count .linkedIn, #show-share-count .googlePlus, #show-share-count .share-count').remove();
or you can use .children()..
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove();
Do like this .children() .They will find the children element of the show-share-count
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
This is how you can do it:
$("button").click(function() {
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus, .share-count").remove();
});
Here is the JSFiddle demo
You can try to use .empty from Jquery if you want to empty the whole div
https://api.jquery.com/empty/
or
$("#show-share-count .facebook").remove()
if you want to remove a specific div
You can use below also:
$('#show-share-count .facebook,.twitter,.linkedIn,.googlePlus,.share-count').remove();

JQuery: Get Text from another <div> only by class

I'm trying to access text from an other div only by classes and with JQuery. I'm always struggling with JQuery because I'm not that familiar with it but for the most times i can get it to work somehow.
I tried something like this:
$(function() {
$(".quote_button").click(
function () {
var text = $(this).parent('.openticket_footer').prev('.openticket_warper').find('.answer_message').text();
alert(text);
}
);});
And many other ways but i cant figure it out.
The easiest way to show you what i want to do is by this picture:
Quote function
I want to click on the class="quote_button"button to access the text in class="answer_message"
Here the html code:
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
if($result["uID"]==$result_answer["uID"]){
echo '<p style="font-size: 8pt">Ersteller</p>';
}
echo '<p><strong>'. $result_answer["uName"] .' '. $result_answer["Firstname"] .'</strong></p>
<p style="font-size: 10pt">'. $result_answer["pName"] .'</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">'. $result_answer["Message"] .'</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
Thank You!
Try this : Get parent using parent method, move to previous div and then find answer_message to get the text
$(function() {
$(".quote_button").click(function () {
var $parent = $(this).parent('.openticket_footer').prev('.openticket_warper');
var text = $parent.find('.answer_message').text();
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
<p style="font-size: 10pt">Name of the candidate</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">Text Message is here</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
$(document).on('click', '.quote_button', function(){
alert($(this).parents('.openticket_warper').find('.answer_message').text());
});

JQUERY append data before sibling

I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");

How To Hide a div based on value in inner div

<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form">
<div class="jtable-input-field-container">
<div class="jtable-input-label">Type</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configType" type="text" name="configType">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Key</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configKey" type="text" name="configKey">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Value</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-configValue" type="text" name="configValue">
</div>
</div>
<div class="jtable-input-field-container">
<div class="jtable-input-label">Description</div>
<div class="jtable-input jtable-text-input">
<input class="" id="Edit-description" type="text" name="description">
</div>
</div>
I need to hide 1 div out of 4 div. I want to hide only div which has inner div as value 'Key'.
Please note that I am not allowed to changed HTML content. I can just write Jquery for it.
You can try this:
$( "div.jtable-input-label:contains('Key')" )
.closest( "div.jtable-input-field-container" )
.css( "display", "none" );
try this,
$("#jtable-edit-form .jtable-input-label:contains('Key')" ).parent().hide();
See this jsfiddle https://jsfiddle.net/cL4wsL3q/1/
Because IDs must be unique on document context, you should target specific parent element containing #Edit-configKey DIV instead:
$('#Edit-configKey').closest('.jtable-input-field-container').hide();
Try this code
$(document).ready(function(){
$( "div.jtable-input-label:contains('Key')" ).parent().hide();
});
Hope this will help you.

Categories