How to remove a specific line from a table date?

Asked

Viewed 37 times

1

Good night, you guys. I have a table here, and the lines and items are added dynamically through a button, the idea of the project is a task manager (I have to do).

I have a boot to add In every item I add, I need to know how to identify this item so it can be removed. That is, I wanted a button in each line, aligned to 'Edit' so that I can remove or change the data of that item that is in the table. But I couldn’t find an answer by searching.

My code is this

<!DOCTYPE html>
<html lang="pt-br">

<head>
insira o código aqui
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id='AddTask'>

        <h1> Adicionar uma tarefa</h1>

        <form>
            <br><br>TaskName: <input type="text" name="" id="tNome">
            <br><br>Descrição: <input type="text" name="" id="tDescricao">
            <br><br>Prioridade:

            <!-- Labels -->
            <label for="High">High</label>
            <input type="radio" name="radPriority" id='rHigh'>
            <label for="Normal">Normal</label>
            <input type="radio" name="radPriority" id="rNormal">
            <label for="Low">Low</label>
            <input type="radio" name="radPriority" id="rLow"><br><br>
            <input type="button" value="Adicionar Tarefa" onclick='startAddTask()'>
            <!--- Over Label -->

        </form>

        <br><br><br><br>

        <div id='resp'>
            <table id='tb'>
                <tr>
                    <th> Nome </th>
                    <th style='width:90px'> Descrição </th>
                    <th> Prioridade </th>
                    <th> Status </th>
                    <th> Editar </th>
                </tr>

            </table>
        </div>
    </div>

    <script>
    class CreateTabs {
        constructor() {
            //Form Inputs
            this.tNome = document.getElementById('tNome');
            this.tDescricao = document.getElementById('tDescricao');
            //Rad Vars
            this.radLow = document.getElementById('rLow');
            this.radHigh = document.getElementById('rHigh');
            this.radNormal = document.getElementById('rNormal');
            this.tab = document.getElementById('tb');

            //Getting The Forms Info

            this.tNomeValue = this.tNome.value

            this.tDescricaoValue = this.tDescricao.value

        }

        create() {
            this.row1 = this.tab.insertRow(1);
            this.col1 = this.row1.insertCell(0);
            this.col2 = this.row1.insertCell(1);
            this.col3 = this.row1.insertCell(2);
            this.col4 = this.row1.insertCell(3);
            this.col5 = this.row1.insertCell(4);

            if (this.radLow.checked){
                this.Prio = 'Low';
            } else if (this.radNormal.checked) {
                this.Prio = 'Normal';
            } else if (this.radHigh.checked){
                this.Prio = 'High';
            } else {
                this.Prio = '';
            }

            this.col1.innerHTML = this.tNome.value;
            this.col2.innerHTML = this.tDescricao.value;
            this.col3.innerHTML = this.Prio;

        }

        checkRad() {
            if (radLow.checked) {
                alert("Low");
            } else if (radHigh.checked) {
                alert('High');
            } else if (radNormal.checked) {
                alert('Normal');
            } else {
                alert('Você precisa Selecionar um dos Campos');
            }
        }

    } //FIM CLASSE

    function startAddTask() {
        control = new CreateTabs();
        control.create();
    }
    </script>
</body>

</html>

CSS:

body {
        background-color: silver;
    }

    div#AddTask {
        width: 90%;
        height: 100%;
        background-color: #333;
        padding: 40px;
        margin: auto;
        color: white;
    }

    #resp {
        width: 100%;
        height: 200px;
        background-color: white;
        margin: auto;
        color: black;
        overflow-x: hidden;
    }

    form {
        text-align: center;
        margin: auto;
    }

    #AddTask h1 {
        text-align: center;
    }

    /* TABLE  */
    table {
        width: 100%;
        border-collapse: collapse;
        position: relative;
    }

    th,td {
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        padding: 8px;
        text-align: left;
    }

    td {
        font-size: 15px;
        font-family: 'Courier New', Courier, monospace;
        overflow-wrap: break-word; 
        width: 5px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }
javascript css html5

  • Dude but if not even your add code is working like that you want help to remove?

  • how so? the code to add this function yes

  • sorry, in create() remove this.col3 =

  • eh that I was testing several things, I forgot to take it

  • I already edited the question and I tidied it was bad

  • No problem young, it happens, I just said because it wasn’t working anyway... if I get a solution I’ll tell you :)

  • thank you very much.

Show 2 more comments

1 answer

1


Guy did so, inside the column builder I put to create a button on col5, this btn when clicking will have a forEach() to catch the father’s father (for the father is the td, but I want the tr), and in the tr I’m gonna give a .remove(). I don’t know if it’s the most elegant way to do it but it works!

class CreateTabs {
    constructor() {
        //Form Inputs
        this.tNome = document.getElementById('tNome');
        this.tDescricao = document.getElementById('tDescricao');
        //Rad Vars
        this.radLow = document.getElementById('rLow');
        this.radHigh = document.getElementById('rHigh');
        this.radNormal = document.getElementById('rNormal');
        this.tab = document.getElementById('tb');

        //Getting The Forms Info

        this.tNomeValue = this.tNome.value

        this.tDescricaoValue = this.tDescricao.value

    }

    create() {
        this.row1 = this.tab.insertRow(1);
        this.col1 = this.row1.insertCell(0);
        this.col2 = this.row1.insertCell(1);
        this.col3 = this.row1.insertCell(2);
        this.col4 = this.row1.insertCell(3);
        this.col5 = this.row1.insertCell(4);

        if (this.radLow.checked) {
            this.Prio = 'Low';
        } else if (this.radNormal.checked) {
            this.Prio = 'Normal';
        } else if (this.radHigh.checked) {
            this.Prio = 'High';
        } else {
            this.Prio = '';
        }

        this.col1.innerHTML = this.tNome.value;
        this.col2.innerHTML = this.tDescricao.value;
        this.col3.innerHTML = this.Prio;
        this.col5.innerHTML = '<button class="fecha">X</button>';

    }

    checkRad() {
        if (radLow.checked) {
            alert("Low");
        } else if (radHigh.checked) {
            alert('High');
        } else if (radNormal.checked) {
            alert('Normal');
        } else {
            alert('Você precisa Selecionar um dos Campos');
        }
    }

} //FIM CLASSE


function startAddTask() {
    control = new CreateTabs();
    control.create();

    let btn = document.querySelectorAll('.fecha');

    function remove(bt) {
        let pai = bt.currentTarget.parentElement.parentElement;
        pai.remove();
    }

    btn.forEach(function(e) {
        e.addEventListener('click', remove);
    })

}
body {
    background-color: silver;
}

div#AddTask {
    width: 90%;
    height: 100%;
    background-color: #333;
    padding: 40px;
    margin: auto;
    color: white;
}

#resp {
    width: 100%;
    height: 200px;
    background-color: white;
    margin: auto;
    color: black;
    overflow-x: hidden;
}

form {
    text-align: center;
    margin: auto;
}

#AddTask h1 {
    text-align: center;
}

/* TABLE  */
table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
}

th,
td {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}

td {
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
    overflow-wrap: break-word;
    width: 5px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<div id='AddTask'>

    <h1> Adicionar uma tarefa</h1>

    <form>
        <br><br>TaskName: <input type="text" name="" id="tNome">
        <br><br>Descrição: <input type="text" name="" id="tDescricao">
        <br><br>Prioridade:

        <!-- Labels -->
        <label for="High">High</label>
        <input type="radio" name="radPriority" id='rHigh'>
        <label for="Normal">Normal</label>
        <input type="radio" name="radPriority" id="rNormal">
        <label for="Low">Low</label>
        <input type="radio" name="radPriority" id="rLow"><br><br>
        <input type="button" value="Adicionar Tarefa" onclick='startAddTask()'>
        <!--- Over Label -->

    </form>

    <br><br><br><br>

    <div id='resp'>
        <table id='tb'>

            <tr>
                <th> Nome </th>
                <th style='width:90px'> Descrição </th>
                <th> Prioridade </th>
                <th> Status </th>
                <th> Editar </th>
            </tr>

        </table>
    </div>
</div>

  • @Luangabriel I’m glad I helped! I’m still junior at JS if I can say that, so I don’t know if this .currentTarget.parentElement.parentElement is the best way but it works rss. Success ai

  • Can you tell me how I can create an edit button to edit the attributes that are below TH, that is, under the title ? I can create a new question for that?

  • @Luangabriel what he would do is where he is '<button class="fecha">X</button>'; I would put '<button class="fecha">X</button><button class="edit">Editar</button>'; and then do a function for that btn.edit. The function can be to open a modal with the TR’s hints something like that. Then btn as you saw is easy to add. The rest is hard... It will look like this: http://prntscr.com/p8xqcg

  • I understand, I’ll try here, but for what you’ve helped me I thank you so much :)

  • Guy in last case, after you try and define how this "edit" will be, if you really grab it, come back there and ask a detailed question and with your current code. But test the code before posting ok ;) haha Abs

  • kkkkkk I will test rsrs

Show 1 more comment

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.