replace all content with
content
in jQuery

Question

How to remove all tags: table, tbody, tr from my HTML code ? At the end I would like replece all

<td>
    <input id="selectOne" type="radio" value="1" name="selectOneRadio">   
</td>

with

<li>
    <input id="selectOne" type="radio" value="1" name="selectOneRadio"> 
</li>

I need a jQuery function. Please help me :)

<table>
    <tbody>
        <tr>
            <td>
                <input id="selectOne" type="radio" value="1" name="selectOneRadio">
                <label for="selectOne">
            </td>  
       </tr>    
    </tbody>
</table>

from comment...

The label element should stay. I tried with:

$('table td').each(function () {
    $(this).replaceWith(function () {
        return $('<li>' + this.innerHTML + '</li>')
    })
});

and then

jQuery.fn.unwrap = function (el) {
    return this.each(function () {
        $(this.childNodes).appendTo(this.parentNode);
    });
};
$('tr, table, tbody').unwrap().remove();

but it doesn't work for me.

Welcome to SO. Here, we help you to overcome your coding problems... but first, you need to help yourself and attempt something. When you get stuck, THEN ask for help. Not many people in this world like to work for free, but many are happy to help problem solve. — ahren, Aug 08 '12 at 23:02
SO is not 'programmer for free' service. What have you tried so far? — Pevara, Aug 08 '12 at 23:05
You want to remove the `label` elements too? Or was that just an accidental omission? — David Thomas, Aug 08 '12 at 23:10
@PatrykMeyer: Adding that much code to a comment is almost useless. I updated your question with that information. — , Aug 08 '12 at 23:35
Why was this closed? (1) This is not localized IMO. How does one replace one html tag with another tag using jquery is perfectly acceptable. (2) In fact the answer is somewhat in the question already. Test it out http://jsbin.com/usotus/3/edit#html,javascript,live — Anthony Hatzopoulos, Aug 09 '12 at 18:18
@sivy see also http://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another — Anthony Hatzopoulos, Aug 09 '12 at 18:27

Niet the Dark Absol · Answer 1 · 2012-08-08T23:17:30.037

2

Create a list with document.createElement. Then loop through the table's rows[] array and, for each one, take the cells[] array and do what you need to in order to get it in a list item (maybe document.createElement to create the list item, then copy the innerHTML of the cell into it).

Once that's done, use insertBefore to put the list where the table was, and finally use removeChild to get rid of the table.

Implementation of the above:

function replaceTableWithList(tableid) {
    var table = document.getElementById(tableid),
        rows = table.rows, cells, list = document.createElement('ul'),
        len = rows.length, i, item;
    for( i=0; i<len, i++) {
        item = list.appendChild(document.createElement('li'));
        cells = rows[i].cells;
        while(cells[0].firstChild) item.appendChild(cells[0].firstChild);
        // this only gets the contents of the first cell in a row
        // to get the whole row will need another loop
    }
    table.parentNode.replaceChild(list,table);
}

edited Aug 08 '12 at 23:17

answered Aug 08 '12 at 23:06

Niet the Dark Absol

320,036
81
464
592

2

FWIW, the OP requested a jQuery solution. – Jason Aug 08 '12 at 23:07
1

Using jQuery for this is like taking a sledgehammer to a nail to hang up a photo. – Niet the Dark Absol Aug 08 '12 at 23:08
1

+1 for a native solution. You could also use `replaceChild` instead of `insertBefore/removeChild` – Aug 08 '12 at 23:11
@amnotiam Thanks for reminding me of that function. – Niet the Dark Absol Aug 08 '12 at 23:17
@Esailija I have corrected myself in the implementation I edited in. Now the nodes themselves are moved over. – Niet the Dark Absol Aug 08 '12 at 23:18
@Kolink actually, Cyber's answer is a pretty elegant and concise way to do this with jQuery. More like pulling out your toolbox and using your 3/4" phillips. I wouldn't recommend using jQuery solely for this purpose, but if you're using it already, there's no reason not to do something like Cyber's answer. And from the looks of the question, he is. – Jason Aug 09 '12 at 02:19
There is a syntax error in your for loop, replace comma with semicolon . `for( i=0; i – Anthony Hatzopoulos Aug 09 '12 at 17:12
Also for what it is worth this function is dependant on `getElementById(tableid)` and having an ID attribute set. OP did not have an ID, so you might want to modify to show an alternate way maybe loop through tables or something similar. – Anthony Hatzopoulos Aug 09 '12 at 17:22

score 1 · Answer 2 · answered Aug 08 '12 at 23:21

1

I would use unwrap/wrap functionality:

$('table').contents().unwrap(); $('tr').contents().unwrap(); $('td').contents().unwrap().wrap('<li/>');

answered Aug 08 '12 at 23:21

Cyber

372
1
9

I hope you realise this annahiliates every single table on the page, when the OP may just want to affect one table? – Niet the Dark Absol Aug 08 '12 at 23:25
But he did not mention anywhere it's about one specific table. :) – Cyber Aug 08 '12 at 23:29
I'm getting error : SyntaxError: unterminated string literal ...().unwrap(); $('tr').contents().unwrap(); $('td').contents().unwrap().wrap('

sivy

Aug 08 '12 at 23:29

@Cyber How to remove **all tags**: table, tbody, tr – sivy Aug 09 '12 at 00:01

I don't see where the error could come from. :( Could you post the whole code? – Cyber Aug 09 '12 at 00:05

If you would like to remove all table tags just remove the ending of the code above that wraps table cells content with with

tags. So it would be something like this: $('table').contents().unwrap(); $('tr').contents().unwrap(); $('td').contents().unwrap();

– Cyber Aug 09 '12 at 00:13

score 0 · Answer 3 · answered Aug 08 '12 at 23:40

I'd wrap your table in some kind of container:

<div id="content">
    <table>
        <tbody>
            <tr>
                <td>
                    <input type="radio" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

Then using jQuery and do something like this:

// Hide the table
$('#content table').hide();

// Append a ul to the content div
$('<ul />').appendTo('#content');

// For each td, wrap children in an li and append to the ul
$('#content table td').each(function (index, element) {
    $(element).children().appendTo('#content ul').wrap('<li />');
});

replace all content with content in jQuery

3 Answers3

replace all content with
content
in jQuery