how to remove the height of div when item removed from it - javascript

I'm showing a list of items in a div. When any of the item is clicked, it will append to the div above. I didn't set any height for this div.Item here will appear with a delete icon beside each item. Once deleted, that particular item will append to the div below which it originated from. Problem now, as items added to the above div, it's height grows and once items deleted, I expect the height would reduce too, but it remains the same. Thus when I add one more item into the above div,it grows even longer. How do I remove the height of the first div?
Pictured below describe the flow:last picture shows what happens after all items deleted from first red box and new item added into it.
Here's my code for what happens when the delete button clicked.
function hide_rate(param)
{
//remove item
$("#wrapper_"+param).text(" ");
$("input[name=rate_"+param+"]").val(" ");
$("input[name=rate_"+param+"]").empty();
$(".cross_"+param).text(" ");
$("#moveItem").css("background-color","#ff0000");
//add back removed item
$("#displaySubItems").append($(".sub_"+param+" span").text()+"<br/>");
}

Using function empty() :retains the element in DOM for eg:
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
$("div.hello").empty();
will only delete the text Hello from the div thereby retaining the div and thus the SPACE
ie. it wil result in
<div class="hello"></div>
<div class="goodbye">Goodbye</div>
However,using remove() will remove the element from the DOM and hence the space retained due to the use of empty() wil be eliminated.
So, use
$("div.hello").remove(); to get desired output ie.
<div class="goodbye">Goodbye</div>

Related

Content editable DIV with BREAK's or just DIV's

I have a div that is content editable and I use this div as an Input for my code. The problem is the user input. If a user writes something in the div, it's just a normal text, but if he makes a new line there is in a div. Can I somehow make it that the first line is also in a div? Or is it possible to just make break elements if there is a new line?
By the way, I want to use a content editable div, because I want to color some parts of the text different that others, why I can't use a text area.
<div contenteditable="true">
"1"
<div>2</div>
</div>
As you can see in the code below if you set the first child element tag as a div, each added child will be a div as well.
var div = document.querySelector("div[contenteditable=true]");
div.addEventListener('input', (e) => {
console.log(e.target.children)
});
console.log(div);
<div contenteditable=true>
<div>‎</div>
<div>
Edit: To have any character at the beginning and be able to click it, copy the invisible character in the first child div.
or copy it here: ‎

Add overlay on specific images selected (no more than 3)

I have a grid of cards, right now clicking one of the cards adds an overlay to all of them.
I need:
1.- If user clicks one cards, and only that card gets the overlay.
2.- No more than 3 cards at a time can have an overlay. User would have to click one of the already clicked cards to diselect it, in order to select another one.
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
JS Code:
$('.imageDiv').click(function(){
$('img').toggleClass("tricky_image");
$(".text").toggleClass("display-inline");
});
Expected result:
Try this instead. Make use of this so that the relevant scope is preserved.
$('.imageDiv').click(function(){
$(this).find('img').toggleClass("tricky_image");
/*$(".text").css("display", "inline");*/
$(this).find(".text").toggleClass("display-inline");
});
You could equally (maybe) use the .children() method (as opposed to .find()) but I didn't know exactly how your dom structure was inside each "imageDiv".
Your specified click function search for every 'img' element and every node with a .text class.
What you actually want, is to get the child img element and .text of the clicked .imageDiv
By limiting the queried scope with $(this).find(...) we only search for child elements of the clicked .imageDiv.
With some additional logic your second requirement can be also fulfilled ->
$('.imageDiv').click(function(){
const trickyCount = $(".tricky_image").length;
const img = $(this).find('img');
const text = $(this).find(".text");
if(trickyCount < 3 || img.hasClass("tricky_image")){
img.toggleClass("tricky_image");
text.toggleClass("display-inline");
}
});

Empty all children of div without specific element

So, i think this should be pretty simple but i can't seem to get it right, say i have an empty div:
<div id='mainDiv'></div>
This div gets filled dynamically with data from database with ajax, i want on button click to empty this div but keep one element with a specific id ex: <div id='divToKeep'></div>, i tried:
$(document).on('click', '#button', function(){
$("#mainDiv > *:not('#divToKeep')").empty()
})
Now this dose empty everything but keeps the empty divs there, i want to remove everything inside #mainDiv but the #divToKeep element.
Get all the mainDiv, then get all elements inside it using children except the div you want to keep, then call remove:
$("#mainDiv").children(":not('#divToKeep')").remove();
Check this fiddle: https://jsfiddle.net/yzfw8atp/2/
This way, it put the divToKeep on the top level, then remove everything else inside.
$('#divToKeep').appendTo('#mainDiv'); // move #divToKeep up to the body
$('#mainDiv *:not(#divToKeep):not(#divToKeep *)').remove(); // remove everything except #divToKeep and inner children
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainDiv'>
<div>
<div>
<div id="divToKeep">
<div>
</div>
</div>
</div>
</div>
</div>
$("#mainDiv").children().not("#divToKeep").remove();

Select text in the last div of class

I have some contenteditable divs with the same class, the div is dynamically created so I don't know how many there are.
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
<div class="scale1" onclick="document.execCommand('selectAll',false,null)" contenteditable>0</div>
I want the text in the last one to be selected (like if you hold the left mouse button down over the text) with a button
The obvious way in jquery:
$(".scale1:last").click();
Doesn't work, it selects the hole page.
I also thought about ways in javascript like Selection.selectAllChildren and Selection.addRange() but i have no elegant way of knowing the last div
How to make text selection checkout here
To reach your goal - replace ID selection with following code:
var query = document.querySelectorAll(".scale1"),
text = query[query.length-1];
Try:
$('.scale1:last').text()
or
$('.scale1').last().text()
Either would work, even for dynamically added elements.
DEMO

jquery clear the space in div after .remove()

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

Categories