function to remove empty <p> removes <p>'s with content - javascript

ive made a function that should remove a p-element if it doesnt have any content or has a br inside itself, when leaving after contenteditable. The problem is that it removes an li that HAS content aswell when .blur() !?
Im going nuts because im sure it worked 10min ago.........
here's the function:
$('p').live('blur', function() {
localStorage.setItem('todo', listan.innerHTML);
color();
if ($(this).html() == "" || "<br>")
{
console.log($(this).html());
$(this).parent().remove();
localStorage.setItem('todo', listan.innerHTML);
}
});
the list ("listan") looks like this:
<ul ID="listan">
<li><p contenteditable="true" class="thing">something</p><input type="button" value="ta bort" class="delete"></li>
</ul>

Remove .parent() from the code, since the parent element of "blurring" p is li. Also check your if statement.
$('p').live('blur', function() {
localStorage.setItem('todo', listan.innerHTML);
color();
var html = $(this).html();
if (html == "" || html == "<br>") {
console.log($(this).html());
$(this).remove();
localStorage.setItem('todo', listan.innerHTML);
}
});​

if( $(this).html() == "" || "<br>")
What this line is saying is "if the html is empty, or if <br> is something".
So it's always true, so no matter what the content is it gets removed.
Try this:
if( $(this).html().replace(/\s|<br ?\/?>/) == "")
This will strip out spaces (most importantly leading and trailing) and line breaks and see if the result is empty.

var html = $(this).html();
if (html == "" || html == "<br>") {....do stuff....}

Why not use CSS?
p:empty {
display: none
}

Related

Finding which element has specific text on a list

I'm doing a menu with fast acess links. I have a button on a different div that when clicked checks if the text is already there, and if it is it does nothing and if it isn't it adds to the bottom position. After that, using jquery ui the user can reorder the list.
The thing is, I want to make it so that when the user clicks and the text is already on the link, I wanted to hightlight for a brief moment the place where the link is already.
The problem I'm facing is how to get in a variable the id from the anchor that has the same text the button would input. I know I can run 10 "ifs" looking if the text is there in each variable, and if it is the animation goes off. But I was looking for a simpler solution, if there is one.
var route = "http://link";
$('.add').click(function() {
if(($('#ref1').text() == "Text") || ($('#ref2').text() == "Text") || ($('#ref3').text() == "Text") || ($('#ref4').text() == "Text") || ($('#ref5').text() == "Text") || ($('#ref6').text() == "Text") || ($('#ref7').text() == "Text") || ($('#ref8').text() == "Text") || ($('#ref9').text() == "Text") || ($('#ref10').text() == "Text")){
}
else{
$('#ref10').attr("href", route)
$('#ref10').text("text")
}
});
EDIT: Adding HTML as asked:
<h4 class="card-tittle"><i class="material-icons" id="acessicon">bookmark</i>Fast acess</h4>
<hr>
<div class="list-group list-group-flush" id="sortable">
Rules
Forms
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
<script>
$( ".acesstop" ).click(function() {
var themes ="procgeral";
sessionStorage.setItem("themes", themes);
});
$( function() {
$( "#sortable" ).sortable({
update: function(event, ui) {
$('.link1').each(function(i) {
$(this).attr('id', 'ref' + (i + 1)); // update id
});
}
});
$( "#sortable" ).disableSelection();
} );
</script>
I thought $(this) would work, but it doesn't unfortunatly.
Thanks in advance!
I have used jQuery .each() method to iterate through all links, compare with passed text and add them to an array.
Here is what I have done to clear out your 10 if statements:
function findElems(text) {
let found = [];
let index = 0;
// Iterate
$('a').each((i, elem) => {
if(elem.textContent == text){
found[index] = elem;
index++;
}
});
console.log(found);
}
a {
width: 50px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
AAA
BBB
CCC
BBB
EEE
FFF
GGG
HHH
<br>
<button onclick="findElems('BBB');">Find Elements</button>
OP's Solution:
var text = "TextIWantToFind";
var found;
//Iterate
$('a').each((i, elem) => {
if (elem.textContent == text) {
found = elem;
}
});
// Using ES6 Template Literals
$(`#${found.id}`).effect("highlight");
/*
// Original approach
$('#' + found.id).effect("highlight");
*/

Input is not detecting that it is empty if removing text with "ctrl + a + backspace"

I am doing some easy div filtering with jQuery and input field. It is working, however it is not detecting that it is empty if I remove input using " Ctrl + a + backspace ", in other words if I select all text and remove it. What causes this?
It is not reordering divs back to default if using the keyboard commands but is going back to normal if you backspace every character.
This is how I do it:
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
$('.card').show();
} else {
$('.card').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
});
};
});
Your if block that handles the empty string is not showing the same elements that the else block hides. The else block calls .parent() but the if block does not.
So the else case shows or hides the parent of each .card element, but the if case shows the .card elements themselves—without unhiding their parents. See my comments added to the code (I also reformatted the conditional expression in the else for clarity):
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
// Show all of the .card elements
$('.card').show();
} else {
$('.card').each(function() {
var text = $(this).text().toLowerCase();
// Show or hide the *parent* of this .card element
text.indexOf(valThis) >= 0 ?
$(this).parent().show() :
$(this).parent().hide();
});
};
});
Since it sounds like the non-empty-string case is working correctly, it should just be a matter of adding .parent() in the if block so it matches the others:
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
// Show the parent of each .card element
$('.card').parent().show();
} else {
// Show or hide the parent of each .card element
$('.card').each(function() {
var text = $(this).text().toLowerCase();
text.indexOf(valThis) >= 0 ?
$(this).parent().show() :
$(this).parent().hide();
});
};
});
This is the kind of situation where familiarity with your browser's debugging tools would pay off big time. The .show() or .hide() methods manipulate the DOM, and by using the DOM inspector you could easily see which elements are being hidden and shown.
In fact, as a learning exercise I recommend un-fixing the bug temporarily by going back to your original code, and then open the DOM inspector and see how it reveals the problem. While you're there, also try out the JavaScript debugger and other tools.
If you use Chrome, here's an introduction to the Chrome Developer Tools. Other browsers have similar tools and documentation for them.
It seems to be working just fine:
$('#brandSearch').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis.length == 0) {
$('.card').show();
console.log("input is empty");
} else {
console.log("input is not empty");
$('.card').each(function() {
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide();
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="brandSearch">

Utilizing jQuery Selectors to simplify HTML parser code

This code uses jQuery find() and several if statements to pick out certain text from an HTML document.
I'm trying to remove the if statements and interpret them to jQuery selectors in find(), at the very top line of code. Is this possible? If so, what would the selectors need to be?
$(document).find("a[href^='http://fakeURL.com/']").each(function()
{
var title = $(this).text();
var url = $(this).attr('href');
if(title.indexOf('Re: ') != 0)
{
if($(this).parent().attr('class') != 'quoteheader')
{
if(url.indexOf('topic') == 36)
{
if($(this).parent().attr('class') == 'middletext')
{
console.log(title);
}
}
}
}
});
For the last thing I left, you want to check if the topic is at index 36 ? not sure its possible via the selector, beside that everything went up to the selector (code not tested, should work tho)
$(document).find(".middletext:not(.quoteheader) > a[href^='http://fakeURL.com/']").each(function()
{
if(url.indexOf('topic') != 36)
return;
var title = $(this).text();
if(title.indexOf('Re: ') != 0)
return;
console.log(title);
});

hide parent div if link inside has empty href

I need to hide the buttonholder Div which is styled to look like a button. But the button styles images need to hide if the link itself is empty.
<div class="RegisterBtnHolder">
<span class="RegisterOrangeButton">
<span>
Register Online
</span>
</span>
</div>
I need to hide RegisterBtnHolder if the anchor tag has empty href or empty text..How do i do this in jquery.
give this a shot:
$(function(){
$("a[href=''],a:empty","div.RegisterBtnHolder").closest("div.RegisterBtnHolder").hide();
});
Using jQuery:
var button = $('.RegisterBtnHolder').find('a'); // caches the <a> element from the dom.
if(button.attr('href') == '') {
button.hide();
}
The above answer prolly works aswell, just remember try to avoid jumping into the DOM as much as possible, it will slow down your load time.
Fiddle
$('.RegisterBtnHolder a').each(function() {
if($(this).attr('href') === '' || $(this).text() === '') {
$(this).parents('.RegisterBtnHolder').hide();
}
});
Does this work for you:
if ($('div.RegisterBtnHolder a').text() == '' || $('div.RegisterBtnHolder a').attr('href') == '') $('div.RegisterBtnHolder a').hide()​
sample code below
if($("a").attr("href") === "" || $("a").text()===""){
$(this).closest("div").hide();
}
Useing filter() helps
http://api.jquery.com/filter/
$('.RegisterBtnHolder a').filter(function(){
/* add any additional tests you might need such as looking for "#" as an href*/
return $(this).attr('href')=='' || $.trim($(this).text())=='';
}).closest('.RegisterBtnHolder').hide();
JavaScript Only
var dilly = document.querySelectorAll('.RegisterBtnHolder a'), i;
for (i = 0; i < dilly.length; ++i) {
var $true = (dilly[i].getAttribute('href') == '')
if ($true == true) {
dilly[i].parentElement.style.display = 'none'
} else {
dilly[i].parentElement.style.border = "1px dotted silver"
}
}
jsfiddle

Showing a div element dependent on if it has content

With jQuery I am trying to determine whether or not <div> has content in it or, if it does then I want do nothing, but if doesn't then I want to add display:none to it or .hide(). Below is what I have come up with,
if ($('#left-content:contains("")').length <= 0) {
$("#left-content").css({'display':'none'});
}
This does not work at all, if the div has not content then it just shows up anyway, can any offer any advice?
Just use the :empty filter in your selectors.
$('#left-content:empty').hide();
if( $( "#left-content" ).html().length == 0 ) {
$( "#left-content" ).hide();
}
try to remove first whitespaces:
// first remove whitespaces
// html objects content version:
var content = $.trim($("#left-content).html()).length;
if(content == 0) {
$("#left-content).hide();
}
// html RAW content version:
var content = $.trim($("#left-content).html()); // <-- same but without length
if(content == "") { // <-- this == ""
$("#left-content).hide();
}

Categories

Resources