jquery clear the space in div after .remove() - javascript

Checkboxes are added to div1 dynamically:
$.each(json, function(idx, obj) {
$("#tbl1").append('<input type="checkbox" id='+obj.firstId+' onclick=nextPopulate('+obj.firstId+'); >'); }
On selecting these, checkboxes are added to div2 dynamically:
$.each(json, function(idx, obj) {
$("#tbl2").append('<label id="chk'+firstId+'"><input type="checkbox" id="'+firstId+'-'+secondId+'" ></label>'); }
On unchecking the checkbox in div1, the corresponding checkboxes(lable element) created in div2 are removed :
if(!($('#'+firstId).is(':checked')))
$("[id^=chk"+firstId+"]").remove();
Lable content is removed.But, the space is still there.If i again select in div1, checkbox in div2 will be created only after this empty space.
How can i remove the space also while removing the content.
Will refreshing/reloading the div after removing will work ?
If yes, then how is the syntax. I don't want to hit the database/call the onclick fn again. Just refresh the div to remove the space created while .remove() the label element.

The ".remove()" function is to remove children elements from the one which call, not to remove the one which call. So with the code below, only checkbox input element is removed, while label element still remains.
$("[id^=chk"+firstId+"]").remove();
The element calling remove() should be "tbl2", and send the parameter "[id^=chk"+firstId+"]" into the function to define the child element about to remove as below:
$("#tbl2").remove("[id^=chk"+firstId+"]");

.remove()
will work. But make sure that all the components especially
<br/>
etc are put inside the parent element and it is removed. Then the space issue is resolved. The next append will append to the correct space in the div.

The first answer will work. To remove <br> just do it:
$('br').remove(); // https://stackoverflow.com/questions/2513848/how-to-remove-nbsp-and-br-using-javascript-or-jquery
If you're have more id:
$("[id^=chk"+firstId+"]").remove('br');

Related

How to access sub-elements in current object within JavaScript/jQuery?

Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.
First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})

Define new :first-child after current one was removed / moved

I have a function that removes list element from one ordered list then finds all ordered lists after current one, gets their first element and appends it to that lists previous one.
The issue: if I remove first element from any list or it is appended function stops working, I believe it is due jQuery remembering what first element was and as it is no longer in its place it can't find it, however it should just re-define / look up new element in particular list that is first child at the moment. Here is the function:
function removeQueueItem(element) {
//Get ordered list of removed list element
var itemMonth = element.parents().eq(2); //li.queue-month
//Get all following lists
nextMonths = itemMonth.nextAll('.queue-month');
//Fade out removed element
element.parent().fadeOut(function(index){
//Remove element from DOM
element.remove();
nextMonths.each(function(index) {
//Check if next month has socks
if($(this).find('.item-dragable').length > 0) {
var firstItem = $(this).find('.item-dragable:first-child');
$(this).prev().find('ol').append(firstItem);
}
});
});
}
JsFiddle - Remove first item in September then remove any item in August, the first item in September should become pink, but it isn't happening. This is what the problem is.
Because you are removing an a tag instead of a li tag. So when you search :first-child it is there, but you do not see it.
In order to make it work you need to change your code from:
element.parent().fadeOut(function(index){
//Remove element from DOM
element.remove(); <-- here
...
});
To:
element.parent().fadeOut(function(index){
//Remove element from DOM
$(this).remove(); <-- element to $(this)
...
});
JSFiddle
That's because it's the parent you're fading out, but the inner element you're removing. Your .item-dragable element still exists and ends up with its display property set to none. This means it's still the first child.
...becomes:
To fix this, simply change:
element.remove()
...to:
element.parent().remove()
JSFiddle demo.

Traversing with jQuery and matching elements

I am cloning a div (with an h3, a paragraph, and a clickable tag line) on the click of the tag line and appending the div to my sidebar. There is several divs with this same structure and when a div has already been cloned I want to make sure that that div is not cloned a second time. To accomplish this I am trying to match the H3 text of the div whose tag line was clicked with the H3 text of divs that have already been cloned. If there is a match, I pop up an alert message and don't append the cloned div to the side bar.
Here is the code i have:
$(this).click(function(){ // where $(this) is the tag line
var clone = $(this).parents('.full_result').clone(); // on the click of the tag line, find the parent whose class is .full_result and clones it (.full_result is the class of all divs)
var jobsH3 = $(this).parents('.full_result').find('h3').text(); // returns the text of the H3 that is contained in the same div as the clicked tag line
var middleColumnInnerDiv=$('#middle_column').find('.full_result').find('h3').text(); // returns the text of all h3 whose divs have been cloned to the side bar(sidebar id= #middle_column)
//below is where the magic should happen, but i cannot make it work. Tried several selectors and methods. The :contains is but one of them.
$(this).parents('.full_result').find('h3').each(function(){
if('middleColumnInnerDiv:contains(jobsH3)'){ // this line is giving me a headache
alert('You already saved this information');
} else {
clone.appendTo('#middle_column').hide().fadeIn(750);
}
});
};
Any help is much appreciated!
you are missing $ Jquery notation. try this $("middleColumnInnerDiv:contains('.jobsH3')")

JavaScript lastChild issue

When I add text in my text field before and after the existing paragraphs the remove button functions perfectly. However, if I click the remove button before adding elements you have to click TWICE to remove the paragraphs that were not created by a function.
What could be wrong here? I watch the DOM in Firebug as I'm adding and removing, and before the new elements are added, my remove button does not target "firstDiv" on the first click, but does so on the second click.
Here is the problem function:
function removeIt() {
firstDiv.removeChild(firstDiv.lastChild);
}
Here is the fiddle: http://jsfiddle.net/nxpeD/2/
Thanks for the help!
That's because you have text nodes (spaces) at the end, so the last paragraph isn't the last child (it is the last element child).
Then, use
function removeIt() {
firstDiv.removeChild(firstDiv.lastElementChild);
}
Demo: http://jsfiddle.net/nxpeD/6/
Compatibility: To make it work on old browsers, you could also use
function removeIt() {
if (firstDiv.lastElementChild) {
firstDiv.removeChild(firstDiv.lastElementChild);
} else {
var last;
while((last = firstDiv.lastChild).nodeType !== 1) {
firstDiv.removeChild(last);
}
firstDiv.removeChild(last);
}
}
References
lastChild
lastElementChild
Use:
firstDiv.removeChild(firstDiv.lastElementChild);
Since there are formatting new line chars in your html, that will be considered as a child as well of the div. So you need to use lastElementChild to get the element and ignore the formatting and and other text nodes outside.
Demo
The last_child returned is a node. If its parent is an element, then the child is generally an Element node, a Text node, or a Comment node. Returns null if there are no child elements.
lastElementChild

jQuery: if $(this) or another element blurs, then

I want to trigger a function if either the currently active element $(this) or another predefined element (e.g.: div#tooltip) blurs. However so far I've not found out how to do this. I've tried:
$(this).add('div#tooltip').live('blur', function(){
$('div#tooltip').hide();
});
Imagine that $(this) would be an input field, for example, and the predefined second element would be a tooltip div and that I would want the tooltip to hide if one of those blurs.
EDIT:
The div#tooltip contains an anchor, which should not make the div#tooltip hide if it's being clicked.
EDIT 2:
Okay, here is a more accurate explanation of my problem. I've got the $.fn.tooltip function which I apply to various text-inputs which have variable class names and id's. Therefore, this input can only be referred to as $(this) within the function.
Secondly I have the tooltip div, which is created by the function. This div goes by the ID #tooltip. This tooltip / div can contain some other elements such as anchors.
The tooltip is shown automatically when the input-field (this) is clicked. Once it's closed it won't be shown again, even if the input-field will be focused again.
What I'm trying to do is:
The tooltip must be removed when the text-input loses it's focus
EXCEPT if the cursor is within the tooltip / div or if an element within this div is being clicked.
Anyone?
Like this: http://jsfiddle.net/uu3zX/7/
HTML:
<input type="text" class="with-tooltip">
<span class="tooltip">?<a style="display:none" href="#">The tip</a></span>
JavaScript:
$('.with-tooltip').on('focus', function(){
$(this).next().children().show();
});
$('.with-tooltip').on('blur', function(){
$(this).next().children().hide();
});
$('.tooltip').hover(
function(){
$(this).children().show();
},
function(){
$(this).children().hide();
}
);
UPDATE
Added alternative solution to fit OP requriment to use this
Borrowing from IntoTheVoid's fiddle: You should wrap the input and the tooltip in a container div (or some other container element) to do this in one line:
$('.tooltip, input').on('mouseout', function(){
$(this).parent().children('.tooltip').hide();
}).on('focus mouseover', function(){
$(this).parent().children('.tooltip').show();
});
http://jsfiddle.net/mblase75/uu3zX/5/

Categories