Find specific string in a div and delete its html element - javascript

is there a way using javascript to find a specific string and delete its' html element.
For example, I have this following html code:
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>
and I want to hide "Text 2", first I want to find this string and then hide it.
what I've tried is using html().replace but it hides only the text not the element.
JSFiddle

In jQuery there is :contains
$('.summary li:contains(Text 2)').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary">
List of texts:
<ul>
<li>Text 0</li>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<li>Text 5</li>
</ul>
</div>

Your fiddle is pretty close. Here's an updated version removing the element from the DOM.
$('.summary li').each(function() {
var $this = $(this);
if ($this.text() === 'Text 2') {
$this.remove();
}
});
http://jsfiddle.net/sLa3dkdd/3/

Iterrate over li elements, check if the text content is the searched value, then hide or remove the element.
$(function() {
$('.summary li').each(function() {
var $this = $(this);
if($this.text() === 'Text 2'){$this.hide();}
});
});

using JQuery you can do it like that :
$('.summary ul').children().each(function () {
if($(this).text() == searchedValue) {
$(this).hide();
}
})

Related

JQuery mobile changing element between list

I have two lists and when clicked on one element I want to remove it from this list and add it to a second one.
<div id="ul1">
<ul id="selected">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<hr />
<div id="ul2">
<ul id="list2">
<li>Item 10</li>
<li>Item 20</li>
<li>Item 30</li>
<li>Item 40</li>
</ul>
</div>
I am not a jQuery dev and I can't have this working properly.
$("#ul1 a").click(function(){
var para1 = this.dataset['para1'];
$(this).closest('li').remove();
add2(para1);
return false;
});
$("#ul2 a").click(function(){
var para1 = this.dataset['para1'];
$(this).closest('li').remove();
add(para1);
return false;
});
function add(p1){
$("#selected").append('<li><a href="" data-para1='+p1+'>'+p1+'</a></li>');
return false;
}
function add2(p1){
$("#list2").append('<li><a href="" data-para1='+p1+'>'+p1+'</a></li>');
return false;
}
I would really appreciate if someone could point out the correct solution to accomplish this.
Here is a demo.
Thanks
Just use appendTo method.
$("#ul1").on('click', 'a', function(){
$(this).closest('li').appendTo('#list2');
return false;
});
$("#ul2").on('click', 'a', function(){
$(this).closest('li').appendTo('#selected');
return false;
});
Have a look at this snippet. It checks the click() event of the anchor inside the li, looks for the li by matching the father of the element.
$(document).ready(function() {
$('#select li a').each(function(index, anchor) {
// Let's add a click listener
$(anchor).click(function(){
// Let's find the father li
$(this).closest('li').appendTo('#append');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ul1">
<ul id="select">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<hr />
<div id="ul2">
<ul id="append">
<li>Item 10</li>
<li>Item 20</li>
<li>Item 30</li>
<li>Item 40</li>
</ul>
</div>
Try this way :
$("#ul1 a").click(function(){
var para1 = $(this).closest('li').html()
$(this).closest('li').remove();
add2(para1);
return false;
});
$("#ul2 a").click(function(){
var para1 = $(this).closest('li').html()
$(this).closest('li').remove();
add(para1);
return false;
});
function add(p1){
("#list2").append(p1);
return false;
}
function add2(p1){
$("#list2").append(p1);
return false;
}
try:
function move(ul1,ul2) {
$('body').on('click',ul1+" a", function(){
$(ul2).append($(this).parent('li'));
//$(this).parent('li').remove();
return false;
});
};
move('#selected','#list2');
move('#list2','#selected');
https://jsfiddle.net/x9LL1ubc/2/

JQuery remove li based on ascii contents

I'm dynamically adding list items to a ul
<ul>
<li>thing 1</li>
<li>thing 2</li>
<li class='colorblock'>thing 3</li>
<li class='colorblock'>thing 4</li>
<li>thing 5</li>
</ul>
In some situations I need to enclose a few of the li with the following
$('.colorblock:first').before('<li>[± </li>');
$('.colorblock:last').append('<li>]</li>');
that products the following
<ul>
<li>thing 1</li>
<li>thing 2</li>
<li>[± </li>
<li class='colorblock'>thing 3</li>
<li class='colorblock'>thing 4</li>
<li>]</li>
<li>thing 5</li>
</ul>
now, if I also may need to remove those two li's with something along the following
$('li').filter(function() { return $.text([this]) === '[± '; }).remove();
$('li').filter(function() { return $.text([this]) === '[± '; }).remove();
$('li').filter(function() { return $.text([this]) === ']'; }).remove();
my problem is that none of these are correctly matching to
<li>[± </li>
I've ran out of ideas on how to strictly match and remove that li. any suggestions?
Try
$('li').filter(function(){
var txt = $.trim($(this).text());
return txt == '[±' || txt == ']'
}).remove()
Demo: Fiddle
Turns out it was an encoding issue with the file it was in, needed to be UTF-8

Having problems using $.each and wrapInner() in jQuery Mobile

I'm trying to iterate through a list of elements and wrap them in a link tag. However, my list displays differently than I want to.
Here is what it should look like: http://jsfiddle.net/eMexU/
HTML
<div id="list" data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</div>
Here is what it looks like when I use $.each and wrapInner(): http://jsfiddle.net/zpFDa/1/
HTML
<div id="list" data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</div>
JS
$("#list li").each(function () {
$(this).wrapInner('')
});
The only way to do this, is replacing existing li with new ones and then call .listview('refresh') to apply styles / enhance markup.
Demo
$("#list li").each(function () {
var text = $(this).text();
$(this).replaceWith('<li>' + text + '</li>')
});
$('#list').listview('refresh');

in jQuery how to give the priority of being detected by "mouseover" event to the child element

my question is how to give the priority of being detected by "mouseover" event to the child element rather than its parent?
this is the jquery code:
<script>
$(function() {
$("li").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>
and this is the html code
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3
<ul>
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ul>
</li>
<li>item 4</li>
</ul>
<div id="log">log</div>
how to output the current element when doing mouseover?
the problem is when you mouseover "item 3.1" the jquery will not detect "item 3.1" and instead jquery will assume that you mouseover "item 3" ?
Thanks
You want the event target:
$("li").mouseover(function(event) {
$('#log').html($(event.target).text());
});
From quirksmode (linked above):
Even if an event is captured or
bubbles up, the target/srcElement
always remains the element the event
took place on.
Demo here.
Add a span inside each li around the text, and check for a mouse over on that
<script>
$(function() {
$("li span").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>
<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span>
<ul>
<li><span>item 3.1</span></li>
<li><span>item 3.2</span></li>
<li><span>item 3.3</span></li>
</ul>
</li>
<li><span>item 4</span></li>
</ul>
<div id="log">log</div>
Here is an alternative to Karim79 method.
$("li").mouseover(function(event){
$('#log').html($(this).text());
event.stopPropagation();
});
Make sure to read what stopPropagation() actually does.
http://jsbin.com/afunu3
You should select the inner 'li' tags instead of all 'li' tags.
For example, you could add a class='innerItem" to inner 'li', like this:
<li class='innerItem'>item 3.1</li>
Then your jQuery should look like this:
<script>
$(function() {
$("li.innerItem").mouseover(function(event){
$('#log').html($(this).text());
});
});
</script>

JQuery - How to move a li to another position in the ul? (exchange 2 li's)

What is a cool way to apply this? I need a script that exchange two < li>'s position in an < ul>.
It think that should be possible to achieve. Thanks for your response.
HTML
<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Pseudo Javascript (JQuery)
$("#awesome ul li:eq(1)").exchangePostionWith("#awesome ul li:eq(3)");
HTML Result
<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 5</li>
</ul>
</div>
You can use jQuery's .after() for moving elements around. I cloned one of them so the original can remain as a placeholder. It's like if you wanted to switch variables a and b, you'd need a third temporary variable.
$.fn.exchangePositionWith = function(selector) {
var other = $(selector);
this.after(other.clone());
other.after(this).remove();
};
Now your pseudocode $("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)"); isn't so pseudo :-)
$("ul li a").click(function () {
$(this).parent().insertBefore('ul li:eq(0)');
});
<ul>
<li><a>a</a></li>
<li><a>b</a></li>
<li><a>c</a></li>
<li><a>d</a></li>
<li><a>e</a></li>
<li><a>f</a></li>
</ul>

Categories