I'm working with some code that allows content editors to add content. I've found a few instances where there is a div that has children (like h5 or p) but no text. The div is taking up space and I would like to remove all of the divs that have no actual text in it.
The only thing I've found is the :empty css selector, but that checks for children, not text.
$('.col-lg-4:empty').remove();
.col-lg-4 {
background-color: #c8c8c8;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-4">
<h5 class="headline1">Test Title</h5>
<p class="p2"></p>
<p>This is some filler text that I have added for testing purposes.This is some filler text that I have added for testing purposes.This is some filler text that I have added for testing purposes.</p>
<p></p>
</div>
<div class="col-lg-4">
<h5 class="subtitle1"></h5>
<p class="p2"></p>
</div>
<div class="col-lg-4">
<p class="p2 last-column"></p>
</div>
<div class="col-lg-4"></div>
</div>
This is some real content from my site that editors have added. As you can see, I have unnecessary divs with no content (the .col-lg-4 ones) that I would like to get rid of. With the :empty, it removes the last one that has no children. But what would be the best way to remove the ones that have children that have no content?
Is that what you want to do?
I can't think of an easier way to do it!
Check the snippet:
$('.col-lg-4').each(function() {
if (!this.innerText) $(this).remove();
});
.col-lg-4 {
background-color: #c8c8c8;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-4">
<h5 class="headline1">Test Title</h5>
<p class="p2"></p>
<p>This is some filler text that I have added for testing purposes.This is some filler text that I have added for testing purposes.This is some filler text that I have added for testing purposes.</p>
<p></p>
</div>
<div class="col-lg-4">
<h5 class="subtitle1"></h5>
<p class="p2"></p>
</div>
<div class="col-lg-4">
<p class="p2 last-column"></p>
</div>
<div class="col-lg-4"></div>
</div>
I used innerText to get rid of all the html tags.
Hope it helps.
Iterate over them, check for empty children, remove:
$('.col-lg-4').each(function () {
if ($(this).children().text() == '') $(this).remove();
});
Without jQuery:
Array.from(document.querySelectorAll('.col-lg-4'))
.filter(i => !i.innerText)
.forEach(e => e.parentNode.removeChild(e));
Related
I have been trying badly to wrap some divs with an outer div so that I can style them. But I'm unable to do so thus far.
I have this list div which contains some inner divs that I need to wrap. That is the inner divs which have same letters need to be bundled together. Although targeting the divs with the letters is not a good idea as they are gonna be dynamic.
This is an example of what I have been trying to achieve:
<div class="list-wrapper">
<div class="el">A</div>
<div>
<a>A</a>
</div>
</div>
<div class="list-wrapper">
<div class="el">C</div>
<div>
<a>C</a>
</div>
<div>
<a>C</a>
</div>
</div>
Another example:
This is what I have tried so far:
$(list).find('div.el').each(function(idx, item) {
$(item).nextAll('div').wrapAll('<div class="list-wrapper"></div>')
});
.wrapper {
background-color: red;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="el">A</div>
<div>
<a>A</a>
</div>
<div class="el">B</div>
<div>
<a>B</a>
</div>
<div class="el">C</div>
<div>
<a>C</a>
</div>
<div>
<a>C</a>
</div>
<div class="el">D</div>
<div>
<a>D</a>
</div>
<div>
<a>D</a>
</div>
<div>
<a>D</a>
</div>
<div class="el">E</div>
<div>
<a>E</a>
</div>
</div>
To achieve your goal you can use a combination of nextUntil() within the loop, to get the div elements between each .el, and wrapAll(). You can include addBack() in there to add the current .el in the loop in to the collection to be wrapped. Try this:
$('#list').find('.el').each((i, el) => {
$(el).nextUntil('.el').addBack().wrapAll('<div class="list-wrapper"></div>')
});
.wrapper {
background-color: red;
padding: 20px;
}
.list-wrapper { border: 1px solid #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
<div class="el">A</div>
<div><a>A</a></div>
<div class="el">B</div>
<div><a>B</a></div>
<div class="el">C</div>
<div><a>C</a></div>
<div><a>C</a></div>
<div class="el">D</div>
<div><a>D</a></div>
<div><a>D</a></div>
<div><a>D</a></div>
<div class="el">E</div>
<div><a>E</a></div>
</div>
Note that $(list) was only working by proxy, as elements with an id attribute are available as properties on the document. It's much better practice to use a valid string selector.
Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/
I'm currently making a forum setup where users can view, post and respond to topics. The bit I'm posting here is the "reply to a topic bit". Where the top post is "Topic", and the "reply" bit is at the bottom. Inbetween I have "posted answers" to said Topic.
The problem I'm having is that the "p" tag wont position itself to the right of the user who posted his/her reply, like the replyfield at the bottom does.
I have tried to copy/paste the reply bit on top of each other, and they align nicely, but once I change the textarea tag to a p tag it wont work.
NOTE: The posts will later on be converted to actual posts using PHP, this is just for testing
Thanks
Here is the code:
HTML
<div class=forumListWrap>
<div class="col-1-forum">
<h2>TITLE</h2><!--TITLE-->
<button type="button" class="forumBtn">Add a Reply</button>
<div class="topic">
<h6>Topic</h6>
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3>View Profile</h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM</p>
</div>
</div>
</div>
</div>
<div class="reply">
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3>View Profile</h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM LOREM</p>
</div>
</div>
</div>
</div>
<div id="horiLine"></div>
<div class="col-2-reply">
<h2>Reply to thread</h2>
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
</div>
</div>
<div class="col-3-reply">
<div class="answerField">
<textarea></textarea>
</div>
<input id="replySubmit" type="submit" value="Submit">
</div>
</div>
</div>
Please see code.
See the updated jsFiddle for a possible Variant.
Explanation of what i did:
i set a width for the column with the username (col-3-reply) to 20% and also made it float left
i set the width of the reply-content to 80%
i added a antifloat div below. This is because floating elements are treated differently, and by adding this, you can have them still inside the box with the grey border of the reply.
Here are the antifloat CSS rules. See the jsFiddle for all details:
.antifloat {
height: 0;
width: 0;
clear: both;
}
As a general hint: Check out the new CSS 3 flexbox ( display:flex; ) it has very good support in all modern browser and is way easier to understand,write and read.
Javascript expert this is my template coding:
<html>
<head>
</head>
<body>
<div id='top'>
<h2> This is my website headline </h2>
</div>
<div class='outer-wrapper'>
<h3>This is content area for main blog </h3>
</div>
<div class='footer'>
<h4> This is footer content area </h4>
</div>
<!--Copyright Structure Start-->
<div id='copyright'>
<div id='container'>
<p>Copyright 2016. Designed By <a href='#'>Company</a>
</p>
</div>
</div>
<!--Copyright Structure End-->
</body>
</html>
i have the below html structure that is used in the template.
<div id='copyright'>
<div id='container'>
<p> Designed By <a id='doom' href='http://www.example.com'>Company</a>
</p>
</div>
</div>
Case 1: Now,i want if the same sequence exist #copyright > #container > p > a#doom in the the html structure inside the template Then its ok, if any if these has removed, then redirect my page to example.com.
<div id='copyright'>
<div id='container'>
</div>
</div>
See the structure above has no <p></P> tag, now it should be redirected.
Case 2: If there is added extra other html tag inside my html structure in the template rather than these tags: #copyright #container P and a#doom. then it should also redirected.
<div id='copyright'>
<div id='container'>
<div id='wrap'>
<p> Designed By <a id='doom' href='http://www.example.com'>Company</a>
</p>
</div>
</div>
</div>
See the structure has extra div wrap now, it should redirected to example.com because it does not match the sequence.
I hope someone will give the script soon. thanks.
You can just use the selector in JQuery and check the length. If you change the HTML, the selector won't match, and you don't redirect:
Run this when you HTML has loaded (onLoad or domReady):
if( $('#copyright > #container > p > a#doom').length == 0 ) {
alert("Redirect");
}
Example fiddle:
https://jsfiddle.net/feb5zex2/
You basically want to run this code when the document is ready (1. line) and if a specific CSS selector with direct ancestor combinations doesn't match (2. line), redirect using window.location.replace() (3. line).
$(document).ready(function() {
if ($("#copyright > #container > p > a#doom").length == 0) {
window.location.replace("http://www.example.com");
}
})
With the example below, I'd like to select the contents of the < h3 > tags for each block, and move them inside the 'title' divs (without the h3 tags). Is this possible?
<div id="block1">
<div class="title">
</div>
<div class="content">
<h3>Title 1</h3>
</div>
</div>
<div id="block2">
<div class="title">
</div>
<div class="content">
<h3>Title 2</h3>
</div>
</div>
Online demo: http://jsbin.com/ezuxo
// Cycle through each <div class="content"></div>
$(".content").each(function(){
// Find its first h3 tag, and remove it
var heading = $("h3", this).remove();
// Set the text of the h3 tag to the value of the previous div (.title)
$(this).prev().html($(heading).html());
});
First off, I'd assign a class to the "blocks", let's call it "block" for now. Then do this:
$(".block").each(function() {
$(".title", this).html($(".content h3", this).html());
}