I have this element appearing on page:
<span class="vc_gitem-post-category-name">Front</span>
<span class="vc_gitem-post-category-name">Category 1</span>
<span class="vc_gitem-post-category-name">Category 2</span>
<span class="vc_gitem-post-category-name">Front</span>
<span class="vc_gitem-post-category-name">Category 3</span>
<span class="vc_gitem-post-category-name">Front</span>
I need to remove every instance of this:
<span class="vc_gitem-post-category-name">Front</span>
There are other categories also listed in the same way and I need that particular category element (span + text) to be removed. There is currently no possibility of adding any specific class or id to the element so it has to be removed in other way.
Use the class name in your selector so you can loop over the elements.
Then, check the contents of each entry, and if a match is found, wrap the current ref in a jQuery object and use remove, which will remove it from the DOM.
jQuery('span.vc_gitem-post-category-name').each(function() {
var text = this.innerHTML;
if (text === 'Front') {
jQuery(this).remove();
}
});
http://jsbin.com/vucucipeho/1/edit?html,js,output
You can acheive this with javascript as well:
https://jsfiddle.net/dhanrajv/av1twkqs/
var byClassName = document.querySelectorAll('span.vc_gitem-post-category-name');
for(var i=byClassName.length;i--;){
if(byClassName[i].innerHTML === 'Front') {
window.document.body.removeChild(byClassName[i]);
}
}
<span class="vc_gitem-post-category-name">Front</span>
<span class="vc_gitem-post-category-name">Category 1</span>
<span class="vc_gitem-post-category-name">Category 2</span>
<span class="vc_gitem-post-category-name">Front</span>
<span class="vc_gitem-post-category-name">Category 3</span>
<span class="vc_gitem-post-category-name">Front</span>
Related
I have tried using basic JavaScript when data-reviews="2" and it worked, but what I need is when data-reviews is less than 5 or any specific number, the whole <span> section should be hidden. I need assistance on this. I am trying to achieve the same outcome but I want to hide this, when data reviews has < 5.
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
Loop over the badge elements. For each collection badge select the review element. Parse the data-reviews attribute with parseInt. Check if the review is less than 5. If so, remove the collection badge element.
const collectionListBadges = document.querySelectorAll('.collection-list-badge');
for (const collectionListBadge of collectionListBadges) {
const reviewsElement = collectionListBadge.querySelector('[data-reviews]');
const amountOfReviews = parseInt(reviewsElement.getAttribute('data-reviews'));
if (amountOfReviews < 5) {
collectionListBadge.remove();
}
}
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="4.0" data-lang="en" aria-label="Rated 4.0 out 38reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="4" data-rating="4.0" data-label="reviews" aria-label="38 reviews" data-version="2">4</span>
</div>
I need to replace every comma immediately after the <span class="inf-group">...</span> node with vertical bars because I have no access to the original html directly. I've even made a mistake, editing the part using css pesudo-element like ::after. Is there any javascript or jQuery solution to operate on the whole isolated text nodes?
Sample representation as it is:
<span class="irreg-infls">
<span class="inf-group"><span class="inf">aaa</span></span>
,
<span class="inf-group"><span class="inf">bbb</span></span>
,
<span class="inf-group"><span class="inf">ccc</span></span>
</span>
Final representation for users:
<span class="irreg-infls">
<span class="inf-group"><span class="inf">aaa</span></span>
|
<span class="inf-group"><span class="inf">bbb</span></span>
|
<span class="inf-group"><span class="inf">ccc</span></span>
</span>
Use the following code to replace the same.
See Check node type
document.querySelector('.irreg-infls').childNodes.forEach((node)=>{
if(node.nodeType == 3 && node.nodeValue.trim() == ',' ) {
node.nodeValue = node.nodeValue.replace(',', '|');
}
})
<span class="irreg-infls">
<span class="inf-group"><span class="inf">aaa</span></span>
,
<span class="inf-group"><span class="inf">bbb</span></span>
,
<span class="inf-group"><span class="inf">ccc</span></span>
</span>
You can use nextSibling with textContent like:
const divs = document.querySelectorAll('.inf-group');
divs.forEach((div,index, array) =>{
if (index !== array.length - 1){
div.nextSibling.textContent = div.nextSibling.textContent.replace(',','|');
}
});
<span class="irreg-infls">
<span class="inf-group"><span class="inf">aaa</span></span>
,
<span class="inf-group"><span class="inf">bbb</span></span>
,
<span class="inf-group"><span class="inf">ccc</span></span>
</span>
To get the exact result I excluded the last one element
I have a method ForceNumeric that i want to apply to a input field. What i want is this: template_item_input[0].ForceNumeric();
My renderd HTML looks like this:
<div id="itemList">
<div class="ingress"></div>
<div id="itemListItem[0]" class="dataListItem first">
<span class="put-left startTimeSpan"></span>
<span class="put-left separator"></span>
<span class="put-left endTimeSpan"></span>
<span class="put-left ruleSpan"></span>
<span class="put-left valueItem">
<input id="template_item_input[0]_value_item" class="styledInput">
</span>
<span class="put-left unit"></span>
</div>
<div id="itemListItem[1]" class="dataListItem first">
<span class="put-left startTimeSpan"></span>
<span class="put-left separator"></span>
<span class="put-left endTimeSpan"></span>
<span class="put-left ruleSpan"></span>
<span class="put-left valueItem">
<input id="template_item_input[1]_value_item" class="styledInput">
</span>
<span class="put-left unit"></span>
</div>
</div>
In $( document ).readyi'm doing this. this.id is equal to template_item_input[0] but value is a empty object object[]
$("#carbList").children(".carbListItem").each(function () {
var value = $(this.id).find('.put-left.valueItem');
var inp = $(value).find('input');
$(inp).ForceNumericOnly();
}),
What am i doing wrong?
this.id will return id of the clicked element. Use $(this) or $('#'+this.id) instead of $(this.id).
$(#YOUR_ID) is a valid selector for to get element having id as YOUR_ID. $(YOUR_ID) will return elements having tag as YOUR_ID => <YOUR_ID>
You do not need to wrap value in jQuery wrapper. It is already $ wrapped object.
I want to get the id/class/both of the anchor tag, regardless of where it falls in the tag hierarchy. Example below is strange but realistic for my purposes because our website is accessed through a CMS that I have no control over. If people add multiple levels of formatting at different times, the CMS likes to add new span's...
So, having the live with the above facts, I want to pin down specific anchor tags by their id/class/both, but I don't always know where they will be located in the tag drill-down.
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I have started off like such,
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var telm = event.target.parentNode.className;
var delm = 'anchor_id_A';
console.log(telm);
if (telm == delm) {
dataLayer.push({
'youClicked': telm
});
console.log(dataLayer);
};
});
*WHERE: telm = target element; delm = desired element.
To clarify. I am specifying anchor for a reason, it is not simply for the example. As I am restricted by our CMS, I can't go in and add markup to pre-defined code (i.e. template), but I do need to know what link was clicked as exactly as possible (for Google Analytics), so that I can track down what users are ignoring, not seeing, or prefering.
You can navigate up the hierarchy until you reach the anchor element, then just read its ID.
See here:
var dataLayer = dataLayer || [];
document.addEventListener('click', function(event) {
var el = event.target;
while (el.parentElement && el.tagName != 'A') {
el = el.parentElement;
}
dataLayer.push({
'youClicked': el
});
console.log(dataLayer);
alert(el.id);
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p>Click Me</p>
</span>
</span>
</span>
</a>
</div>
</div>
What you're trying to achieve, is probably something like this :
var dataLayer = [];
document.addEventListener('click', function(event) {
var needle = 'anchor_class_A'; // The class of the element you're looking for
var closest = event.target.closest("." + needle);
if(closest && closest.id) {
dataLayer.push({
'youClicked': closest.id
});
alert(JSON.stringify(dataLayer, null, '\t'));
}
});
<div id="div_id_A" class="div_class_A">
<div class="div_class_A">
<a href="#" id="anchor_id_A" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_B">
<span id="span_id_C" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
<div class="div_class_A">
<a href="#" id="anchor_id_X" class="anchor_class_A">
<span class="span_class_A">
<span id="span_id_Y">
<span id="span_id_Z" class="span_class_C">
<p class="clicker">
Click Me
</p>
</span>
</span>
</span>
</a>
</div>
</div>
I have
<span class="mention-persons">
<span class="link-text" id="parent4a275ca0-1bbd-11e4-8b7c-a02bb830bf59">
<span class="and_text"></span> Elephant Melephant<span onclick="deletemention(this);" id="4a275ca0-1bbd-11e4-8b7c-a02bb830bf59" class="delete-tag">×</span>
</span>
<span class="link-text" id="parent5991dff0-1bcf-11e4-908f-a02bb830bf59">
<span class="and_text">and</span> Dogs Cats<span onclick="deletemention(this);" id="5991dff0-1bcf-11e4-908f-a02bb830bf59" class="delete-tag">×</span>
</span>
</span>
Is it possible if i am at at the first link-text or at first and_text or at first delete-tag element i can get the next and-text element using jquery and set it text to empty?
If you're at the first link-text:
$(this).next('.link-text').children('.and_text').empty();
If you are at the first .link-text or .delete-tag use:
$(this).closest('.link-text').next('.link-text').children('.and_text').empty();
UPDATE
Irrespective of where you are on the first .link-text, you can use the following:
var that = $(this).is('.link-text') ? $('.link-text') : $(this).closest('.link-text');
that.next('.link-text').children('.and_text').empty();
You can try something like this:
$(this).parents(".link-test").next(".link-text").children(".and_text").text('');