jQuery dataTables - Remove an HTML element from a cell

Question

Trying to dynamically edit cells based on different JQuery events. This is what I'm hoping that should be done to the data (putting together the fns in simpler way)

var d = table.cell(rowindex,cellindex).node().remove(".custom-class1");
table.cell(rowindex,cellindex).data(d);

Example data on cell,

<td>
  <span class="custom-class1"></span>
  <span class="custom-class2"></span>
</td>

The cell data should be replaced with,

<td>
  <span class="custom-class2"></span>
</td>

Thanks in advance!

can you bit be specific on what kind if jQuery events you want to do this?? — Guruprasad J Rao
– Guruprasad J Rao, Commented Jun 21, 2015 at 5:23
In jquery you can try replaceWith api.jquery.com/replacewith — Amitd
– Amitd, Commented Jun 21, 2015 at 5:33

davidkonrad · Accepted Answer · 2015-06-22 10:52:34Z

The setup

var d = table.cell(rowindex,cellindex).node().remove(".custom-class1");

would never work. node() returns a DOM node, not a jQuery object (use to$() or toJQuery() for that), and remove(".custom-class1") would remove the entire <td> anyway.

To remove a particular <span> you should use $('span-selector').remove(). $somethingContainingSpans.remove('.class') removes $somethingContainingSpans as well.

I would retrieve the content as jQuery instance, work on it and put it back. The following removes <span class="custom-class1">class1</span> when you click on a cell :

table.on('click', 'td', function() {
   var $data = table.cells(this).nodes().to$();    
   //or just -> var $data = $(table.cell(this).data());  
   $data.find('span').remove(".custom-class1");
   table.cell(this).data($data.html());
});

demo -> http://jsfiddle.net/ka4v78jd/

NB: Using cells(this).nodes() (the plural methods) since to$() not seems to work with cell() nor node() - but the result is the same.

omikes · Accepted Answer · 2015-06-21 06:04:21Z

0

Are you looking to remove a span via row and column specification, or just class. If its just class, try:

$('#button').click(function(){
    var className = $('#classHolder').val();
    $('.'+className).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
  <span class="custom-class1">custom-class1</span>
  <span class="custom-class2">custom-class2</span>
</td>
<br><br>
<input type="text" placeholder="Example: custom-class1" id="classHolder" /><button id="button">Remove Class</button>

answered Jun 21, 2015 at 6:04

omikes

8,7119 gold badges39 silver badges52 bronze badges

Collectives™ on Stack Overflow

jQuery dataTables - Remove an HTML element from a cell

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related