Removing an empty div with class attribute and contenteditable value set - javascript

I am using the jQuery code to remove empty divs from my HTML upon click, so that the HTML data can be saved:
$("div:empty").remove();
This is failing to remove the following divs:
<div class="row" contenteditable="true">
</div>
I thought that this would qualify as empty. Any ideas on how to overcome this issue?

Try this, The following snippet will return the div elements with unnecessary empty spaces also.
$("div").filter(function(){
return $(this).text().trim() == ""
}).remove();
DEMO

That div contains empty space, which is considered "text" by jQuery and as such won't be selected as empty.
This markup does match the empty selector:
<div class="row" contenteditable="true"></div>

Related

Contenteditable div can´t be read by Jquery, variable returns as undefined

I need to pass the content from a contenteditable div into an input, in order to submit it with PHP.
I found out that Jquery can´t read its content, I'd be thankful if anyone could solve my problem.
function textChange() {
var str = $('#preblogbody').html();
$("#blogbody").val(str);
alert(str);
}
<form>
.....
<div id="WYSIWYG" id="preblogbody" contenteditable="true" onkeyup="textChange()" onmouseup="textChange()">
</div>
<textarea class="hidden" id="blogbody" name="blogbody"></textarea>
.....
</form>
You have two ID's on the same element. The second one is being ignored.
Change
<div id="WYSIWYG" id="preblogbody" contenteditable="true"...
To
<div id="preblogbody" contenteditable="true"...
and your code works fine as shown

Replacing a number found on multiple instances in div element with another number

As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.
However, my jQuery isn't working.
jQuery(".create-new-location").click(function() {
jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
<div class="input-selection title-edit-header">
<div class="text-input">
<input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
</div>
</div>
<div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>
You have to set the html like this
jQuery(".create-new-location").click(function() {
var the_html = jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']');
jQuery("#header-logo").html(the_html);
});
But this is not a good practice!!
When you need to change only the attribute of an <input>, why change the whole #header-logo, right? When you re-draw html like this, you risk losing event-handlers binded to the elements you have just re-drawn.
jQuery(".create-new-location").click(function() {
var elements = jQuery("#header-logo").find('input[name]'); /*all input with name*/
elements.each(function(el){
var the_name = el.attr('name').replace(/\[0\]/g, '['+(1)+']');
el.attr('name', the_name);
});
});
Regexing the html is never a good idea.
As you can see, my HTML contains multiple references to '0'. I need to change these to '1'.
The approach you used, and even the accepted answer here, will not modify the containing div with id="header-logo" which contains several of these references. Moreover, there are significant issues with simply replacing existing dom elements with freshly regexed ones in validation cases (as in, this may break your validation).
The approach you should use is to specifically target the attributes that contain these references, and then only modify those. Here is a general approach which looks in all attributes and modifies the occurrence of [0 (0 being the value of before) into [1 (1 being the value of after) as well as modifying the occurrence of -0 (before = 0) to -1 (after =1).
This will prevent removing any existing event handlers from the elements, as well as a number of other issues associated with regexing straight html and then replacing the dom element with the that result.
$.fn.indexUpdate = function(before,after){
$("*",this).add(this).each(function(){
$(this.attributes).each(function(){
this.value = this.value.replace(new RegExp('\\b\\-'+before+'\\b','g'), '-'+after);
this.value = this.value.replace(new RegExp('\\['+before, 'g'), '['+after);
});
});
};
$("#header-logo").indexUpdate(0,1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-logo" class="header-title location-header-0 title-edit-header" data-row-id="location-header-0" title="Location name (for your reference)">
<div class="input-selection title-edit-header">
<div class="text-input">
<input class="option_textbox col-sm-12 change-width title-edit" placeholder="Location name (for your reference)" value="" type="text" name="bp_theme_options[social][map][locations][0][location_name]">
</div>
</div>
<div class="open-block pencil-edit" data-row-id="location-header-0"></div>
</div>
This statement jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'); retrieve the html inside the element that have id as header-logo and replace every 0 inside the html string with 1 But it doesn't assign the modified string again to the element So you may want to use following code.
jQuery("#header-logo").html(jQuery("#header-logo").html().replace(/\[0\]/g, '['+(1)+']'));
Try this:It will replace all existence of '0' with '##'
$(".create-new-location").click(function() {
$("#header-logo").html().replace(/0/gi, '##')
});

jQuery - Appending images after input field based on value

Firstly here's the fiddle
I'm trying to append an image after input field, the input field can be selected based on value.
HTML Code:
<input type="checkbox" value="example"> Example
JS Code:
$('input[value="example"]').append("<img src='https://www.google.co.in/images/nav_logo195.png'");
Any help would be appreciated
You should use .after(), instead of .append(). The .append() method inserts the new element as the last child of the element it is called on, whereas .after() inserts the new element after the element it is called on.
$('input[value="example"]').after("<img src='https://www.google.co.in/images/nav_logo195.png'/>");
You were also missing the following characters at the end of your string: />
Html:
<div id="id">
<input type="checkbox" value="bigstock">Big store
</div>
js:
html="<img src='https://www.google.co.in/images/nav_logo195.png'>";
$('#id').append(html).trigger("create");
The jsfiddle link for reference:
http://jsfiddle.net/san_here/y6r78mgy/
Hope, it will usefull.

remove or hide text using jquery?

I need to hide some text (Add £0.20) which is within a td. I have a parent DIV class at the top. Here is the cut down HTML:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, Add £0.20<br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
the css path looks like this:
html body div#container div#body-container div#content-area div#content-text div#kitProduct div#KitFormOptions form table tbody tr.LightCell td
You can dynamically wrap price with span using replace with regular expression:
$("#KitFormOptions td").each(function(){
$(this).html(
$(this).html().replace(/(Add £\d*\.\d{2})/,"<span class='price'>$1</span>")
)
})
And hide them
$('span.price').hide()
This replace any decimal format consisting zero of more decimal numbers before dot and exactly two numbers after dot.
Therefore it will be replaced any price which will be on site.
You can do the following but its not a good idea. Better is to create a span around £0.20 and hide this. But you say you cant do this.
$("#KitFormOptions").html($("#KitFormOptions").html().replace("£0.20",""))
Why hide it? Can't you just delete it? Otherwise you'll need to add a <span> around it or something similar so you can reference it.
Where is the HTML coming from and why is the price even there then?
The best solution can looks like: push your ", add 20" to span and set class="hide" for the span tag.
A div element should not contain a lonely td but try this snippet, it replaces the text in all tdelements within your div #KitFormOptions:
$('#KitFormOptions td').text('Text Personalisation');
Wrap it in some element like <span> give it a class, and hide that element.
Example:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, <span class="price">Add £0.20</span><br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
jQuery:
$('span.price').hide()

Select all elements that are not descendents of elements with a certain class

I'm trying to come up with a selector that will select all textarea elements, except those that are descendents of the .noSpell class.
So I want this to match:
<div>
<textarea />
</div>
but not this
<div class="noSpell">
<div>
<textarea />
</div>
</div>
I tried this:
$(":not(.noSpell) textarea")
but it didn't work, presumably because while it won't match the outer element, it can match any of the inner ones.
So, how would I write a selector that excludes parts of the DOM tree based on a class name?
How about this:
$("textarea").not(".noSpell textarea")
All textareas, then remove the ones that have a parent of .noSpell.
The following works for me:
$("textarea").not(".noSpell");
Tested in firefox/firebug.
#cdmckay Your method is also right.
Try creating textarea as:
<textarea></textarea>
and see if your code works.
You might want to do this to see if your code works
if($(":not(.noSpell) textarea").length > 0) {
alert("there");
}
else {
alert("not there");
}
Cheers!

Categories

Resources