CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10581

How to remove <br> and everything after that?

If I do the following is fine:

<div id="results">
  <p>Hello<br>there</p>
</div>

$($("#results p").children('br').get(0).nextSibling).remove();

I get: hello

But if I do:

<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: Cannot read property 'nextSibling' of undefined

Upvotes: 3

Views: 1603

Answers (3)

Titus
Titus

Reputation: 22474

That is because .get(...) returns a DOM element not a jQuery object. In the first example you're using $(...) to convert that DOM element to a jQuery object but you're not doing that in the second example.

This will convert the DOM element to a 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 it to do because as @Forty3 said "the <td> isn't inside the ..infobox"

This seems to work but I've probably made things more complicated then they have to 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>

Upvotes: 3

nnnnnn
nnnnnn

Reputation: 150080

Your code doesn't work because the ".infobox td" selector is looking for a td element inside an .infobox element, but in your HTML the td immediately follows the .infobox.

If you want something that is very similar to your existing JS but working with that HTML (noting that td and th elements need to be inside a tr in a 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 following the .infobox, get that element's child br elements, take the first one's .nextSibling, then wrap it in a jQuery object so that you can call .remove().

EDIT: Note that if there were multiple rows with similar elements the above code would only do the removal on the first one. If it were my code I would probably select all of the relevant elements and then update their HTML something more like this:

$(".infobox").next("td").html(function(i, h) { return h.split('<br>')[0] })

Upvotes: 1

Govind Samrow
Govind Samrow

Reputation: 10189

I've simplest solution for this, try this one:

$('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>

Upvotes: 2

Related Questions