How to remove and everything after that?
If I do the following it is good:
<div id="results">
<p>Hello<br>there</p>
</div>
$($("#results p").children('br').get(0).nextSibling).remove();
I get: hello
But if I do this:
<th class="infobox">Head</th>
<td>Hello<br>there</td>
var newLineRemove = $(".infobox td").children('br').get(0).nextSibling();
$wikiDOM.find(newLineRemove).remove();
Gives me
Uncaught TypeError: Unable to read property "nextSibling" from undefined
source to share
Your code doesn't work because the selector is ".infobox td"
looking for a td element within an element .infobox
, but in your HTML the td immediately follows .infobox
.
If you want something similar to existing JS, but working with this HTML (noting that the td and th elements must be inside a tr in the table), you can do this:
$($(".infobox").next().children("br")[0].nextSibling).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
<td>Hello<br>there</td>
</tr>
</table>
That is, use .next()
to get the element next to .infobox
, get those br children of the element, take the first one .nextSibling
, and then wrap it in a jQuery object so you can call .remove()
.
EDIT: Note that if there were multiple lines with similar elements, then the above code would only perform the delete on the first. If this were my code, I would probably highlight all the relevant elements and then update my HTML code like this:
$(".infobox").next("td").html(function(i, h) { return h.split('<br>')[0] })
source to share
This is because it is .get(...)
returning a DOM element, not a jQuery object. In the first example, you are using the $(...)
DOM element to transform into a jQuery object, but you are not doing that in the second example.
This will convert the DOM element to jQuery element and get rid of the error
var newLineRemove = $($(".infobox td").children('br').get(0).nextSibling);
But it won't do what you want, because as @ Forty3 said "is <td>
not inside..infobox"
This seems to work, but I probably complicated things because they should be:
$(function(){
var td = $(".infobox").next();
if(td.find("br").length){
$(td.contents().get().reverse()).each(function(){
$(this).remove();
if(this.tagName == "BR"){
return false;
}
});
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th class="infobox"></th>
<td>Hello<br>there</td>
</table>
source to share
I have the simplest solution for this, try this:
$('td').each(function() {
$(this).html($(this).html().split('<br>')[0]);
});
li {
margin-bottom: 10px;
}
#usp-custom-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
</tr>
<tr>
<td>Hell
<br>there</td>
</tr>
<tr>
<td>Hello
<br>there<br>there</td>
</tr>
</table>
source to share